亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 Recative 表單中使用 formArray 時出現“TypeError:

在 Recative 表單中使用 formArray 時出現“TypeError:

智慧大石 2021-10-14 17:44:14
我正在使用 formArray 創建動態表單。但是我遇到了“類型錯誤:無法讀取未定義的屬性‘控件’”enter code hereimport { Component, OnInit } from '@angular/core';import { FormGroup, FormBuilder, FormArray } from '@angular/forms';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) export class AppComponent implements OnInit { title = 'Trainner Registration Form '; registrationForm: FormGroup; get LanguagesForm() {    return this.registrationForm.get('Languages') as FormArray; } addLanguage() {  this.LanguagesForm.push(this.fb.control(''));} constructor(private  fb : FormBuilder ) {}   ngOnInit(){     this.registrationForm = this.fb.group({      personalDetails : this.fb.group({      name: this.fb.group({        firstName: [''],        lastName: ['']      }),      aboutYours: [''],      dob: [''],      // lang: [''],      Languages: this.fb.array([]),      wTT: ['']    })  });}onSubmit() {  console.log(this.registrationForm.value);  // this._registerationservice.register(this.registrationForm.value).subscribe(  //   response => console.log('Success', response),  //   error => console.log('Error',error)  // );}}預期結果:如果用戶單擊“添加語言”按鈕,則應創建一個新的輸入字段。實際結果:我收到“類型錯誤:無法讀取未定義的屬性‘控件’”
查看完整描述

3 回答

?
牛魔王的故事

TA貢獻1830條經驗 獲得超3個贊

發生這種情況是因為您沒有設置上層 formGroup,personalDetails因此 reyLanguages在registrationForm控件中查找帶有名稱的控件,其中Languages控件是personalDetails表單組中的控件,另一件與您有拼寫錯誤相關的內容LanguagesForm.controls必須是“Languages.controls”


<div class="form-group">

  <label>Language(s) : </label>

  <button type="button" class="btn btn-secondary btn-sm m-2" (click)="addLanguage()">Add Language</button>


  <div [formGroup]="registrationForm"> <!-- ?? -->

    <div [formGroupName]="'personalDetails'"> <!-- ?? -->


      <div formArrayName="Languages">

        <div *ngFor="let lag of registrationForm.get('personalDetails').get('Languages').controls; let i =index;">

          <input type="text" class="form-control" [formControlName]="i">

        </div>


      </div>

    </div>

  </div>

</div>

您可以使用 get 屬性來訪問這樣的語言表單


  langsform() :FormArray { 

    return this.registrationForm.get('personalDetails').get('Languages') as FormArray 

  }

模板


<div [formGroup]="registrationForm">

  <div [formGroupName]="'personalDetails'">


    <div formArrayName="Languages">

      <div *ngFor="let lang of langsform.controls; let i =index;">

          <input type="text" class="form-control" [formControlName]="i">

      </div>

    </div>

  </div>

</div>


查看完整回答
反對 回復 2021-10-14
?
瀟瀟雨雨

TA貢獻1833條經驗 獲得超4個贊

我認為問題是你在 onInit 中初始化了 registrationForm 對象,此時模板已經被解析,所以你應該*ngIf="this.registrationForm"在這個 div 上添加一個<div formArrayName="Languages">


查看完整回答
反對 回復 2021-10-14
  • 3 回答
  • 0 關注
  • 219 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號