validacion - validar formulario angular 5
ngModel no se puede usar para registrar controles de formulario con una directiva primaria formGroup (8)
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.
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>
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.
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.
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}"
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
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>
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>.
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>