Tengo la siguiente plantilla. Estoy tratando de familiarizarme con las formas reactivas, pero tengo un problema.
<form [formGroup]="guestForm" novalidate> <div class="panel-body"> <form> <div class="col-md-12 col-sm-12"> <div class="form-group col-md-3 col-sm-6"> <label>First Name* </label> <input formControlName="firstname" type="text" class="form-control input-sm"> </div> </div> </form> </div> </form>Luego en mi componente tengo:
@Component({ selector: 'guest-input', templateUrl: './guest-input.component.html', }) export class GuestInputComponent implements OnInit { @Input() guest: Guest; guestForm: FormGroup; constructor(private _fb: FormBuilder) { } ngOnInit() { this.guestForm = this._fb.group({ firstname: ['test', [Validators.required, Validators.minLength(3)]] }); } }Todo esto me parece bien, pero por alguna razón estoy recibiendo:
Error: No capturado (en promesa): Error: formControlName debe usarse con una directiva formGroup principal. Querrá agregar una directiva de formGroup y pasarle una instancia de FormGroup existente (puede crear una en su clase).
Pensé que había declarado esto en mi <form> .
Tiene una etiqueta de formulario anidada dentro de la etiqueta de formulario con la directiva FormGroup , elimínela:
<form [formGroup]="guestForm" novalidate> <div class="panel-body"> <form> -> Remove this <div class="col-md-12 col-sm-12"> <div class="form-group col-md-3 col-sm-6"> <label>First Name* </label> <input formControlName="firstname" type="text" class="form-control input-sm"> </div> </div> </form> -> Remove this </div> </form>En modelDrivenForms , [formGroup]="guestForm" debe estar en el elemento principal
<div class="form-group col-md-3 col-sm-6" [formGroup]="guestForm"> <label>First Name* </label> <input formControlName="firstname" type="text" class="form-control input-sm"> </div>Cuando tomas control de forma sin formGroup.
Código de error:
<ul class="list-unstyled noti-list m-0"> <li class="d-flex align-items-center"> <div class="custom-switch ml-auto"> <input formControlName="promotionMaterial" (change)="onChange($event)" class="tgl tgl-light tgl-primary" id="promotionMaterial" type="checkbox" /> <label class="tgl-btn m-0" for="promotionMaterial"></label> </div> </li> <li class="d-flex align-items-center"> <div class="custom-switch ml-auto"> <input formControlName="offer" (change)="onChange($event)" class="tgl tgl-light tgl-primary" id="offer" type="checkbox" /> <label class="tgl-btn m-0" for="offer"></label> </div> </li> <li class="d-flex align-items-center"> <div class="custom-switch ml-auto"> <input formControlName="termsAndConditions" (change)="onChange($event)" class="tgl tgl-light tgl-primary" id="termsAndConditions" type="checkbox" /> <label class="tgl-btn m-0" for="termsAndConditions"></label> </div> </li>En [Código de error] tomo "formControlName" por lo que no me funciona.
Solución:
<ul class="list-unstyled noti-list m-0"> <li class="d-flex align-items-center"> <div class="custom-switch ml-auto"> <input [formControl]="promotionMaterial" class="tgl tgl-light tgl-primary" id="promotionMaterial" type="checkbox" /> <label class="tgl-btn m-0" for="promotionMaterial"></label> </div> </li> <li class="d-flex align-items-center"> <div class="custom-switch ml-auto"> <input [formControl]="offer class="tgl tgl-light tgl-primary" id="offer" type="checkbox" /> <label class="tgl-btn m-0" for="offer"></label> </div> </li> <li class="d-flex align-items-center"> <div class="custom-switch ml-auto"> <input [formControl]="termsAndConditions" class="tgl tgl-light tgl-primary" id="termsAndConditions" type="checkbox" /> <label class="tgl-btn m-0" for="termsAndConditions"></label> </div> </li>En la solución, tomo [formControl] en lugar de formControlName, funciona bien