loops - importar - pasar parametros entre componentes angular 4

Angular 2 no puede encontrar el control con un atributo de nombre no especificado en formArrays

Question

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>

Answer 1

El problema para mí fue que tenía

[formControlName]=""

En vez de

formControlName=""

Answer 2

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''"

Answer 3

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.

Answer 4

Esto me estaba sucediendo porque tenía fromArrayName lugar de formArrayName alguna parte 😑

Answer 5

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.

Answer 6

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

:)