Я пытаюсь перебрать formArray в мой компонент, но я получаю следующую ошибку
Ошибка: не удается найти элемент управления с неуказанным атрибутом name
Вот какая логика выглядит на мой файл класса
в
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.значения`.
В моем случае я решил проблему, поставив имя formControl в двухместный и одноместный кавычки, так что оно интерпретируется как строка:
[formControlName]="'familyName'"
Вместо
formGroupName="i"
Вы должны использовать:
[formGroupName]="i"
Советы:
Поскольку вы'вновь перебирая элементы управления, вы'ве уже зона переменной``, так что вы можете заменить это:
*ngIf="areasForm.get('areas').controls[i].name.hasError('required')"
по:
*ngIf="area.hasError('required', 'name')"
Также, вы Дон'т нужно поставить требуется
на ввод
с использованием активных форм.
Это происходило для меня, потому что я fromArrayName
вместо formArrayName
где 😑
Для меня, я пытался добавить [formGroupName]="Я"
в formControlName и/или и **забыв указать formArrayName родитель
**. Обратите внимание на форму группы деревьев.