Soy nuevo en angular. Estoy renderizando dinámicamente algunos campos en mi forma reactiva. Todo funciona muy bien cuando uso ng serve con una solicitud simulada (es decir, la representación se realiza correctamente, no hay error en el archivo console.log). Tan pronto como construyo el proyecto con ng build y uso un backend adecuado, obtengo el error para cada campo que estoy representando dinámicamente:
main.js:1 ERROR TypeError: Cannot read property '_rawValidators' of nullNo pude encontrar ningún fondo en este error. Me encantaría escuchar tus pensamientos.
// these fields change with selection this.datafields = [{ dfId: 48, dfName: "Phone", dfType: "text", dfOptions: null, dfValue: "" }, { dfId: 49, dfName: "Eval", dfType: "select", dfOptions: ["","Remote","Live"], df_value: "", }] renderizado mecanografiado en ngOnInit (probé ngAfterViewInit sin ninguna mejora)
dfGroup = new FormGroup({}) ... ... this.eyeForm = this.formBuilder.group({ focus: ['', Validators.required], datafields: this.formBuilder.array([]) }) ... ... if (this.datafields != null || this.datafields != undefined) { this.datafields.forEach((x:any) => { this.dfGroup.setControl(x.dfName, new FormControl(x.dfValue)); }); this.getDataFields.push(this.dfGroup); }y HTML tiene el siguiente aspecto:
<div [formGroup]="dfGroup"> <div class="row pt-2" *ngFor="let field of datafields; let i=index"> <div class="col-4 d-flex align-items-center 13required"> {{field.dfName}} </div> <div class="col-6"> <mat-form-field *ngIf="field.dfType == 'text'" appearance="outline"> <input matInput [type]="field.dfType" [formControlName]="field.dfName" required /> </mat-form-field> <mat-form-field *ngIf="field.dfType == 'select'" appearance="outline" > <mat-select [formControlName]="field.dfName" placeholder=""> <mat-option [value]="option" *ngFor="let option of field.dfOptions" > {{ option }} </mat-option> </mat-select> </mat-form-field> </div> </div> </div>Tuve un problema similar, debe agregar un div adicional con la propiedad [formGroupName]="i" ,
El código final sería,
<div [formGroup]="dfGroup"> <div class="row pt-2" *ngFor="let field of datafields; let i=index"> <div [formGroupName]="i"> <div class="col-4 d-flex align-items-center 13required"> {{field.dfName}} </div> <div class="col-6"> <mat-form-field *ngIf="field.dfType == 'text'" appearance="outline"> <input matInput [type]="field.dfType" [formControlName]="field.dfName" required /> </mat-form-field> <mat-form-field *ngIf="field.dfType == 'select'" appearance="outline"> <mat-select [formControlName]="field.dfName" placeholder=""> <mat-option [value]="option" *ngFor="let option of field.dfOptions"> {{ option }} </mat-option> </mat-select> </mat-form-field> </div> </div> </div> </div>Me encontré con esta situación cuando me estaba burlando de mi plantilla y escribí mi atributo formControlName.
<mycomponent formControlName="bogusfieldSpelledWrong" ...>Por qué Angular lo mostró como este error probablemente tenga algo que ver con la forma en que el componente estaba inicializando/cambiando el formulario.
debe ser sobre formControlName. verifique los nombres de control de su formulario en el archivo ts y el archivo html. para grupos anidados puede usar formGroupName, luego use formControlName.
this.yourForm = this.fb.group({ name: [''], contact: this.fb.group({ address: [''] }) }) <form [formGroup]="yourForm"> <input type="text" formControlName="name" /> <div formGroupName="contact"> <input type="text" formControlName="address" /> </div> </form>