Angular 2 formArrays에서 지정되지 않은 이름 속성이있는 컨트롤을 찾을 수 없습니다.

내 구성 요소에서 formArray를 반복하려고하는데 다음 오류가 발생합니다.

Error: Cannot find control with unspecified name attribute

내 클래스 파일의 논리는 다음과 같습니다.

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

내 템플릿 파일

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

에서 브래킷을 제거하십시오

[formArrayName]="areas" 

그리고 사용

formArrayName="areas"

이것은 [ ]당신이 변수 를 바인드하려고 시도하기 때문입니다 . 또한 제출을 확인하십시오.

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

대신 areasForm.values.

제 경우에는 formControl의 이름을 큰 따옴표와 작은 따옴표로 묶어 문자열로 해석되도록 문제를 해결했습니다.

[formControlName]="'familyName'"

아래와 비슷합니다.

formControlName="familyName"

나에게 문제는

[formControlName]=""

대신에

formControlName=""

대신에

formGroupName="i"

다음을 사용해야합니다.

[formGroupName]="i"

팁 :

컨트롤을 반복하고 있으므로 이미 변수 area가 있으므로 다음을 바꿀 수 있습니다.

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

으로:

*ngIf="area.hasError('required', 'name')"

나를 위해, 내가 추가하려고했다 [formGroupName]="i"및 / 또는 formControlName과 부모를 지정 잊고formArrayName . 양식 그룹 트리에주의하십시오.

내가 어딘가 fromArrayName대신에 있었기 때문에 이런 일이 일어 formArrayName났습니다 😑

이것은 formControlName을 비워 두었 기 때문에 ( formControlName="") 나에게 일어났습니다 . 추가 양식 컨트롤이 필요하지 않았기 때문에 삭제하고 오류가 해결되었습니다.

그래서 다음 코드가 있습니다.

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

여기서 나는 독립형 formControl을 사용하고 있었는데 우리가 말하는 오류가 발생했습니다. 폼 그룹이나 형식으로 작업하지 않았기 때문에 말이되지 않았습니다. * ngIf를 선택 항목에 추가했을 때만 사라졌습니다. 그것은 자체이므로 실제로 존재하기 전에 사용되지 않습니다. 그것이 제 경우에 문제를 해결 한 것입니다.

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