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>
14 ответов
Снимите скобки с
[formArrayName]="areas"
и использовать только
formArrayName="areas"
Это, потому что с [ ] Вы пытаетесь связать переменную, которой это не является. Также обратите внимание на вашу заявку, она должна быть:
(ngSubmit)="onSubmit(areasForm.value)"
вместо areasForm.values,
Вот
демонстрация
:)
В моем случае я решил проблему, поместив имя formControl в двойные кавычки и кавычки, чтобы оно интерпретировалось как строка:
[formControlName]="'familyName'"
Проблема для меня заключалась в том, что у меня было
[formControlName]=""
Вместо
formControlName=""
Вместо
formGroupName="i"
Вы должны использовать:
[formGroupName]="i"
Советы
Поскольку вы перебираете элементы управления, у вас уже есть переменная areaтак что вы можете заменить это:
*ngIf="areasForm.get('areas').controls[i].name.hasError('required')"
За:
*ngIf="area.get('name').hasError('required')"
Кроме того, вам не нужно ставить required на input используя реактивные формы.
Для меня я пытался добавить [formGroupName]="i" и / или formControlName и забыв указать родителяformArrayName, Обратите внимание на дерево групп форм.
Это происходило для меня, потому что у меня было fromArrayName вместо formArrayName где-то
Итак, у меня был такой код:
<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 в select он сам, поэтому не используется до того, как он действительно существует. Вот что решило проблему в моем случае.
<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>
Для меня проблема заключалась в том, что мне не хватало имени поля в конструкторе форм:
return this.fb.group({
name: ['', [Validators.required]],
latLong: ['', [Validators.required]],
details: ['', [Validators.required]],
// missing field name!
});
В моем случае я забыл инициализировать форму вngOnInit()когда используешь[formControl]="customForm".
Это случилось со мной, потому что я оставил поле formControlName пустым (formControlName=""). Поскольку мне не понадобился этот дополнительный элемент управления формой, я удалил его, и ошибка была устранена.
Я случайно ввел имя элемента управления при создании formGroup:
getFormGroup(dataItem: any): FormGroup {
return new FormGroup({
'Id': new FormControl(dataItem != null ? dataItem.Id : ''),
'PsDepartmentId': new FormControl(dataItem != null ? dataItem.DepartmentId : '', Validators.required), //Accidentally used 'DepartmentId' on this line
'IsActive': new FormControl(dataItem != null ? dataItem.IsActive : true)
});
}
Затем это не удалось в html, когда я сделал
<kendo-dropdownlist id="ps-dpts-dropdown" [data]="psDepartments" textField="ConCatedName" valueField="Id"
[formControl]="formGroup.get('DepartmentId')" [valuePrimitive]="true">
</kendo-dropdownlist>
Только WinMerge заставил меня его найти (по сравнению с версией, которая работает). У меня возникла проблема с formGroupName. Скобки вокруг этого слова могут привести к той же проблеме.
Угол 13!formControlNameне должен пустовать.
formControlName=""