loops - importar - pasar parametros entre componentes angular 4
Angular 2 no puede encontrar el control con un atributo de nombre no especificado en formArrays (6)
El problema para mí fue que tenía
[formControlName]=""
En vez de
formControlName=""
Estoy tratando de iterar sobre un formArray en mi componente, pero aparece el siguiente error
Error: Cannot find control with unspecified name attribute
Así es como se ve la lógica en mi archivo de clase
export class AreasFormComponent implements OnInit {
public initialState: any;
public areasForm: FormGroup;
constructor(private fb: FormBuilder) { }
private area(): any {
return this.fb.group({
name: ['''', [Validators.required]],
latLong: ['''', [Validators.required]],
details: ['''', [Validators.required]]
});
}
public ngOnInit(): void {
this.areasForm = this.fb.group({
name: ['''', [Validators.required]],
areas: this.fb.array([this.area()])
});
}
}
y mi archivo de plantilla
<form class="areas-form" [formGroup]="areasForm" (ngSubmit)="onSubmit(areasForm.values)">
<md-input-container class="full-width">
<input mdInput placeholder="Location Name" type="text" formControlName="name" required>
<md-error *ngIf="areasForm.get(''name'').hasError(''required'')">Please enter the locationName</md-error>
</md-input-container>
<md-grid-list cols="1" [formArrayName]="areas">
<md-grid-tile formGroupName="i" colspan="1" rowHeight="62px" *ngFor="let area of areasForm.controls.areas.controls; let i = index ">
<md-grid-list cols="3" rowHeight="60px">
<md-grid-tile colspan="1">
<md-input-container class="full-width">
<input mdInput placeholder="Area Name" type="text" formControlName="name" required>
<md-error *ngIf="areasForm.get(''areas'').controls[i].name.hasError(''required'')">Please enter the area name</md-error>
</md-input-container>
</md-grid-tile>
<md-grid-tile colspan="1">
<md-input-container class="full-width">
<input mdInput placeholder="details" type="text" formControlName="details" required>
<md-error *ngIf="areasForm.get(''areas'').controls[i].name.hasError(''required'')">Please enter the locationName</md-error>
</md-input-container>
</md-grid-tile>
<md-grid-tile colspan="1">
<button md-fab (click)="remove(i)"><md-icon>subtract</md-icon>Remove Area</button>
</md-grid-tile>
</md-grid-list>
</md-grid-tile>
</md-grid-list>
<button type="submit" [disabled]="areasForm.invalid" md-raised-button color="primary">Submit</button>
</form>
En mi caso, resolví el problema poniendo el nombre de formControl entre comillas dobles y simples para que se interprete como una cadena:
[formControlName]="''familyName''"
En vez de
formGroupName="i"
Debes usar:
[formGroupName]="i"
Consejos :
Dado que está recorriendo los controles, ya tiene el
area
variable, por lo que puede reemplazar esto:
*ngIf="areasForm.get(''areas'').controls[i].name.hasError(''required'')"
por:
*ngIf="area.hasError(''required'', ''name'')"
Además, no necesita poner
required
en la
input
usando formas reactivas.
Esto me estaba sucediendo porque tenía
fromArrayName
lugar de
formArrayName
alguna parte 😑
Para mí, estaba tratando de agregar
[formGroupName]="i"
y / o
formControlName
y
olvidando especificar el
formArrayName
padre
.
Presta atención a tu árbol de grupo de formularios.
Retire los soportes de
[formArrayName]="areas"
y usar solo
formArrayName="areas"
Esto, porque con
[ ]
está intentando vincular una
variable
, que no es así.
También observe su envío, debe ser:
(ngSubmit)="onSubmit(areasForm.value)"
en lugar de
areasForm.values
.
Aquí está un
Demo
:)