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] = "areasForm" ถูกต้องหรือไม่ Angular กำลังเตะกางเกงฉันอยู่จริงๆ ....
greg

วงเล็บปีกกาเป็นปัญหาในกรณีของฉันกับ formGroupName
Luis Contreras

2
@ รวมช้าที่จะแสดงความคิดเห็น ... [formGroup]="areasForm"ถูกต้องเนื่องจากareasFormเป็นตัวแปรใน TS คอมโพเนนต์ของคุณในขณะที่areasไม่ใช่ เป็นทรัพย์สินของareasForm:)
AJT82

17

ในกรณีของฉันฉันแก้ไขปัญหาโดยใส่ชื่อของ formControl ในเครื่องหมายคำพูดคู่และ sinlge เพื่อให้ตีความเป็นสตริง:

[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>)
จอห์น

1
การให้ความสนใจกับรูปแบบกลุ่มต้นไม้ช่วยฉัน
सत्यमेवजयते

3

สิ่งนี้เกิดขึ้นสำหรับฉันเพราะฉันมีfromArrayNameแทนที่จะformArrayNameอยู่ที่ไหนสักแห่ง😑


1
! @ # $ 🤦🤦🤦🤦🤦
วอล

1
@wal คุณมีปัญหาเดียวกันหรือไม่?
Jacob Stamm

1
ใช่ฉันตรวจสอบการพิมพ์ผิดนี้ด้วยซ้ำหลังจากอ่านคำตอบของคุณ แต่พลาดครั้งแรก
wal

1
วัวศักดิ์สิทธิ์ฉันมี "formArraryName" และคุณช่วยฉันประหยัดเวลาได้มาก
Ashley

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 แบบสแตนด์อโลนและฉันได้รับข้อผิดพลาดที่เรากำลังพูดถึงซึ่งไม่สมเหตุสมผลสำหรับฉันเนื่องจากฉันไม่ได้ทำงานกับ formgroups หรือ formarrays ... มันจะหายไปก็ต่อเมื่อฉันเพิ่ม * 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>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.