Angular 2 не удается найти элемент управления с неопределенным атрибутом имени в formArrays


92

Я пытаюсь перебрать 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>

Ответы:


148

Снимите скобки с

[formArrayName]="areas" 

и использовать только

formArrayName="areas"

Это потому, что [ ]вы пытаетесь привязать переменную , а это не так. Также обратите внимание на свою отправку, она должна быть:

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

вместо areasForm.values.


Ваш plunkr сломан?
Jess

2
и все же [FormGroup] = "areaForm" верна? Angular действительно пинает меня в штаны ....
greg

Фигурные скобки были проблемой в моем случае с formGroupName
Луис Контрерас

2
@greg поздно комментировать ... [formGroup]="areasForm"правильно, потому что areasFormэто переменная в вашем компонентном TS, а areasэто не так. Это собственность areasForm:)
AJT82

17

В моем случае я решил проблему, заключив имя formControl в двойные и одинарные кавычки, чтобы оно интерпретировалось как строка:

[formControlName]="'familyName'"

как показано ниже:

formControlName="familyName"

8

Проблема для меня заключалась в том, что у меня

[formControlName]=""

Вместо того

formControlName=""

1
Мне нужно было перейти с [formControl] на formControlName
danilo

7

Вместо того

formGroupName="i"

Вы должны использовать:

[formGroupName]="i"

Советы :

Поскольку вы перебираете элементы управления, у вас уже есть переменная area, поэтому вы можете заменить ее:

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

от:

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

Спасибо, похоже, это часть проблемы, но ответ выше решил мою проблему.
Bazinga777

5

Для меня, я пытался добавить [formGroupName]="i"и / или formControlNameи забыв указать родительformArrayName . Обратите внимание на дерево групп вашей формы.


1
Я тоже использовал оба. Не забудьте поставить formArrayNameна DOM-элемента выше в иерархии , чем [formGroupName]="i"(например , на элементе контура: <div *ngFor=let ctrl of formArrayCtrl; let i = index"><div [formGroupName]="i"></div></div>)
John

1
Обратите внимание на то, что дерево групп форм мне помогло.
सत्यमेव जयते

3

Это происходило для меня, потому что у меня fromArrayNameвместо чего- formArrayNameто было 😑


1
! @ # $ 🤦🤦🤦🤦🤦
wal

1
@wal Была ли у вас такая же проблема?
Джейкоб Штамм,

1
да, я даже проверил эту опечатку после прочтения вашего ответа, но пропустил ее в первый раз
wal

1
святая корова, у меня была formArraryName, и ты только что сэкономил мне столько времени.
Эшли

0

Это случилось со мной, потому что я оставил formControlName пустой ( formControlName=""). Поскольку мне не понадобился этот дополнительный элемент управления формой, я удалил его, и ошибка была устранена.


0

Итак, у меня был такой код:

<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>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.