Angular 2 Não é possível encontrar controle com atributo de nome não especificado em formArrays

93

Estou tentando iterar sobre um formArray em meu componente, mas recebo o seguinte erro

Error: Cannot find control with unspecified name attribute

Aqui está a aparência da lógica em meu arquivo de classe

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()])
        });
    }
}

e meu arquivo de modelo

<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>
Bazinga777
fonte

Respostas:

150

Remova os colchetes de

[formArrayName]="areas" 

e use apenas

formArrayName="areas"

Isso, porque com [ ]você está tentando vincular uma variável , o que não é. Observe também seu envio, deve ser:

(ngSubmit)="onSubmit(areasForm.value)"

em vez de areasForm.values.

AJT82
fonte
Seu plunkr está quebrado?
Jess
2
e ainda [FormGroup] = "areasForm" está correto? Angular está realmente me chutando ...
greg
As chaves eram o problema no meu caso com o formGroupName
Luis Contreras
2
@greg tarde para comentar ... [formGroup]="areasForm"está correto porque areasFormé uma variável em seu componente TS, enquanto areasnão é. É propriedade de areasForm:)
AJT82
17

No meu caso, resolvi o problema colocando o nome do formControl entre aspas duplas e sinlge para que seja interpretado como uma string:

[formControlName]="'familyName'"

semelhante a abaixo:

formControlName="familyName"
Tobias Gassmann
fonte
8

O problema para mim era que eu tinha

[formControlName]=""

Ao invés de

formControlName=""
smac89
fonte
1
Eu precisava mudar de [formControl] para formControlName
danilo
7

Ao invés de

formGroupName="i"

Você deve usar:

[formGroupName]="i"

Dicas :

Como você está fazendo um loop sobre os controles, você já tem a variável area, portanto, pode substituí-la:

*ngIf="areasForm.get('areas').controls[i].name.hasError('required')"

de:

*ngIf="area.hasError('required', 'name')"
developer033
fonte
Obrigado, isso parecia ser parte do problema, mas a resposta acima resolveu meu problema.
Bazinga777
5

Para mim, eu estava tentando adicionar [formGroupName]="i"e / ou formControlNamee esquecendo-se de especificar o paiformArrayName . Preste atenção à sua árvore de grupo de formulários.

giovannipds
fonte
1
Eu estava usando os dois também. Lembre-se de colocar o formArrayNameem um DOM elemento mais acima na hierarquia do que [formGroupName]="i"(por exemplo, sobre o elemento loop: <div *ngFor=let ctrl of formArrayCtrl; let i = index"><div [formGroupName]="i"></div></div>)
John
1
Preste atenção para formar a árvore do grupo me ajudou.
Bal Krishna Jha
4

Isso estava acontecendo comigo porque eu tinha, em fromArrayNamevez de em formArrayNamealgum lugar 😑

Jacob Stamm
fonte
1
! @ # $ 🤦🤦🤦🤦🤦
wal
1
@wal Você teve o mesmo problema?
Jacob Stamm
1
Sim, eu mesmo verificado para este erro de digitação depois de ler a sua resposta, mas perdeu a primeira vez
wal
1
vaca sagrada, eu tinha "formArraryName" e você acabou de me economizar muito tempo.
Ashley
1

Então, eu tinha este código:

<div class="dropdown-select-wrapper" *ngIf="contentData">
    <button mat-stroked-button [disableRipple]="true" class="mat-button" (click)="openSelect()" [ngClass]="{'only-icon': !contentData?.buttonText?.length}">
      <i *ngIf="contentData.iconClassInfo" class="dropdown-icon {{contentData.iconClassInfo.name}}"></i>
      <span class="button-text" *ngIf="contentData.buttonText">{{contentData.buttonText}}</span>
    </button>
    <mat-select class="small-dropdown-select" [formControl]="theFormControl" #buttonSelect (selectionChange)="onSelect(buttonSelect.selected)" (click)="$event.stopPropagation();">
      <mat-option *ngFor="let option of options" [ngClass]="{'selected-option': buttonSelect.selected?.value === option[contentData.optionsStructure.valName]}" [disabled]="buttonSelect.selected?.value === option[contentData.optionsStructure.valName] && contentData.optionSelectedWillDisable" [value]="option[contentData.optionsStructure.valName]">
        {{option[contentData.optionsStructure.keyName]}}
      </mat-option>
    </mat-select>
  </div>

Aqui eu estava usando o formControl autônomo e estava recebendo o erro do qual estamos falando, o que não fazia sentido para mim, já que eu não estava trabalhando com formgroups ou formarrays ... ele só desapareceu quando adicionei o * ngIf ao select ele mesmo, então não está sendo usado antes de realmente existir. Foi isso que resolveu o problema no meu caso.

<mat-select class="small-dropdown-select" [formControl]="theFormControl" #buttonSelect (selectionChange)="onSelect(buttonSelect.selected)" (click)="$event.stopPropagation();" *ngIf="theFormControl">
          <mat-option *ngFor="let option of options" [ngClass]="{'selected-option': buttonSelect.selected?.value === option[contentData.optionsStructure.valName]}" [disabled]="buttonSelect.selected?.value === option[contentData.optionsStructure.valName] && contentData.optionSelectedWillDisable" [value]="option[contentData.optionsStructure.valName]">
            {{option[contentData.optionsStructure.keyName]}}
          </mat-option>
        </mat-select>
Chema
fonte
0

Isso aconteceu comigo porque deixei um formControlName vazio ( formControlName=""). Como não precisava daquele controle de formulário extra, excluí-o e o erro foi resolvido.

Stephanie McNaught
fonte