javascript - 在 Angular6 中创建动态形式

Question

我需要创建一个动态表单。当单击AddNew时，它会创建一个新表单。

我在 ts 文件中使用此代码:

    addinfoForm:FormGroup;
  infoNameList:FormArray;
  infoModel:Productdetail;

  constructor(private fb:FormBuilder,private router:Router,private tokenService:TokenstoreService) { }

  ngOnInit() {
    this.InfoForm();
  }

  /**
   * AddInfoForm
   */
  public InfoForm() {
    this.addinfoForm=this.fb.group({
      infoName:this.fb.array([this.CreateInfoName()])
    })
    this.infoNameList=this.addinfoForm.get('infoNames') as FormArray;
  }

  public CreateInfoName():FormGroup{
    return this.fb.group({
      infoName:['',Validators.compose([Validators.required])]
    });
  }

  public AddInfoName(){
    this.infoNameList.push(this.CreateInfoName());
  }

  public RemoveInfoName(index:number){
    this.infoNameList.removeAt(index);
  }

并在 html 中使用它:

        <div class="panel-content">
          <form class="form-line" [formGroup]="addinfoForm" (ngSubmit)="AddRole()">
                <div formArrayName="infoNameList">
                    <div class="description" *ngFor="let name of addinfoForm.controls; let NameIndex=index" [formGroupName]="NameIndex">
                    <div [formGroupName]="i" class="row">
                        <label class="form-line">  Name:   </label>
                        <input style="margin-right: 50px;" class="form-line" pInputText id="pFaName" formControlName="Name">
                        <app-filederrors [form]="addinfoForm" 
                            field="pFaName"
                            nicename="Name">
                        </app-filederrors>
                    </div>
                    </div>
            </div>
        </form>
        <button (click)="AddInfoName()">Add New </button>
              <div class="button">
                  <button pButton type="button" label="REgister" (click)="AddCat()" [disabled]="!addinfoForm.valid" class="ui-button-rounded"></button>
                  <button pButton type="button" label="Cencel" class="ui-button-rounded ui-button-danger"></button>
              </div>
    </div>

但是当我点击它时我怎么会出现这个错误:

AddinfoComponent.html:21 ERROR TypeError: Cannot read property 'push' of null at AddinfoComponent.push../src/app/admin/admin/dashboard/productinfo/addinfo/addinfo.component.ts.AddinfoComponent.AddInfoName (addinfo.component.ts:41)

我该如何解决这个问题？

Answer 1

也许get('infoName')而不是get('infoNames')？

  public InfoForm() {
    this.addinfoForm=this.fb.group({
      infoName:this.fb.array([this.CreateInfoName()])
    })
    this.infoNameList=this.addinfoForm.get('infoName') as FormArray;
  }