내 구성 요소에서 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=""
) 나에게 일어났습니다 . 추가 양식 컨트롤이 필요하지 않았기 때문에 삭제하고 오류가 해결되었습니다.