validacion - validar formulario angular 5

ngModel no se puede usar para registrar controles de formulario con una directiva primaria formGroup

Question

Después de actualizar a RC5, comenzamos a recibir este error:

ngModel cannot be used to register form controls with a parent formGroup directive.  Try using
  formGroup''s partner directive "formControlName" instead.  Example:


<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>

In your class:

this.myGroup = new FormGroup({
   firstName: new FormControl()
});

  Or, if you''d like to avoid registering this form control, indicate that it''s standalone in ngModelOptions:

  Example:


<div [formGroup]="myGroup">
   <input formControlName="firstName">
   <input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}">
</div>

Parece que en RC5 los dos ya no se pueden usar juntos, pero no pude encontrar una solución alternativa.

Aquí está el componente que produce la excepción:

<select class="field form-control" [formGroup]="form" [(ngModel)]="cause.id" [name]="name">
<option *ngFor="let c of causes" [value]="c.text">{{c.text}}</option>
</select>

Answer 1

Si el componente tiene más de 1 formulario, registre todos los controles y formularios

Necesitaba saber por qué esto estaba sucediendo en cierto componente y no en ningún otro componente.

El problema era que tenía 2 formularios en un componente y el segundo formulario aún no tenía [formGroup] y aún no estaba registrado ya que todavía estaba creando los formularios.

Seguí adelante y terminé de escribir ambos formularios completos sin dejar una entrada no registrada que resuelva el problema.

Answer 2

Acabo de recibir este error porque no incluí todos mis controles de formulario dentro de un div con un atributo formGroup .

Por ejemplo, esto arrojará un error

<div [formGroup]=''formGroup''>
</div>
<input formControlName=''userName'' />

Esto puede ser bastante fácil de pasar por alto si es una forma particularmente larga.

Answer 3

Ampliando la respuesta de @Avenir Çokaj

Al ser un novato, incluso al principio no entendí claramente el mensaje de error.

Lo que indica el mensaje de error es que en su formGroup tiene un elemento que no se tiene en cuenta en su formControl. (Intencionalmente / Accidentalmente)

Si tiene la intención de no validar este campo pero aún quiere usar el ngModel en este elemento de entrada, agregue la bandera para indicar que es un componente independiente sin necesidad de validación como se menciona anteriormente en @Avenir.

Answer 4

La respuesta es correcta en el mensaje de error, debe indicar que es independiente y, por lo tanto, no entra en conflicto con los controles del formulario:

[ngModelOptions]="{standalone: true}"

Answer 5

OK, finalmente lo hice funcionar: vea https://github.com/angular/angular/pull/10314#issuecomment-242218563

En resumen, ya no puede usar el atributo de name dentro de un formGroup , y debe usar formControlName en formControlName lugar

Answer 6

Si desea utilizar [formGroup] con formControlName , debe reemplazar el atributo de name con formControlNameformControlName .

Ejemplo:

Esto no funciona porque usa el [formGroup] y el atributo de name .

<div [formGroup]="myGroup">
   <input name="firstName" [(ngModel)]="firstName">
</div>

Debe reemplazar el atributo de name por formControlName y funcionará bien de la siguiente manera:

<div [formGroup]="myGroup">
   <input formControlName="firstName" [(ngModel)]="firstName">
</div>

Answer 7

cuando escribe formcontrolname Angular 2 no acepta. Tienes que escribir formControlName . se trata de mayúsculas segundas palabras.

<input type="number" [(ngModel)]="myObject.name" formcontrolname="nameFormControl"/>

si el error continúa, intente configurar el control de formulario para todo el campo de objeto (myObject).

entre el inicio <form> </form> por ejemplo: <form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> set form control for all input field </form>.

Answer 8

import { FormControl, FormGroup, AbstractControl, FormBuilder, Validators } from ''@angular/forms'';


    this.userInfoForm = new FormGroup({
      userInfoUserName: new FormControl({ value: '''' }, Validators.compose([Validators.required])),
      userInfoName: new FormControl({ value: '''' }, Validators.compose([Validators.required])),
      userInfoSurName: new FormControl({ value: '''' }, Validators.compose([Validators.required]))
    });

<form [formGroup]="userInfoForm" class="form-horizontal">
            <div class="form-group">
                <label class="control-label"><i>*</i> User Name</label>
                    <input type="text" formControlName="userInfoUserName" class="form-control" [(ngModel)]="userInfo.userName">
            </div>
            <div class="form-group">
                <label class="control-label"><i>*</i> Name</label>
                    <input type="text" formControlName="userInfoName" class="form-control" [(ngModel)]="userInfo.name">
            </div>
            <div class="form-group">
                <label class="control-label"><i>*</i> Surname</label>
                    <input type="text" formControlName="userInfoSurName" class="form-control" [(ngModel)]="userInfo.surName">
            </div>
</form>