javascript - 为不起作用的动态字段创建添加按钮

Question

我正在尝试使用 Address 类创建一个带有添加按钮和删除按钮的动态字段。我对为什么 addAddress 函数不起作用感到困惑。我四处寻找解决方案，但我搜索的任何内容都没有奏效。我是 Angular 的新手，所以我可能会让它变得比需要的更复杂。这是 app.component.ts

import { FormGroup, FormControl, FormArray, FormBuilder } from 
'@angular/forms';
import { Component, OnInit } from '@angular/core';
import { Validators} from '@angular/forms';

class Address{
constructor(public stName, public aptNo, public pinCode){
 }
}

class registrationModel{
 constructor(public firstName, public lastName,public age,public fromStates, 
   public state, public homeAddress:Array<Address> ){}
}

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
   private _formObject:FormGroup;  
   private _formModel:registrationModel;
   private _addressObject:Address;

   private _createFormGroup(){

    this._formObject = this._formBuilder.group({
    addLabelTitle:["", Validators.minLength(2)],
    addLabelType:["", Validators.minLength(2)],
    firstName:[],
    lastName:[],
    age:[18, [Validators.min(18), Validators.max(60)]],
    fromStates:[false],
    state:[],
    stName: [],
    aptNo: [],
    pinCode: [],
    homeAddress:this._formBuilder.array([Address])
    });
    this._formObject.reset(this._formModel);
    console.info(this._formObject);

 }

private _submitValue(){
// this._formObject = this._formBuilder.group({
//   addLabelTitle:[],
//   addLabelType:[],
//   firstName:[],
//   lastName:[],
//   age:[],
//   fromStates:[false],
//   state:[]
// });

console.info(this._formObject.value);
}

private _resetValue(){
this._formObject.reset();
}
private _addAddress(){
this._addressObject = new Address("","","");

/*
  Create a address model.
  Inject it to formObject.
*/
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<small>{{this._formObject.value|json}}</small>
<!--The content below is only a placeholder and can be replaced.-->
<div class="registrationForm" [formGroup]="_formObject">
  <!-- Name Input box -->
  <div class="formGroup">
   <label>Name :</label>
   <input type="text" placeholder="First Name" formControlName="firstName" 
    ngModel required>
   <input type="text" formControlName="lastName" placeholder="Last Name" 
   ngModel required>
</div>
<!-- Name Age box -->
<div class="formGroup">
  <label>Age :</label>
  <input type="number" placeholder="Age" formControlName="age">
  <small *ngIf="_formObject.controls.age.errors">
  {{getErrors(_formObject.controls.age.errors)}}</small>
</div>
<!-- form United States -->
<div class="formGroup">
  <label>From United States </label>
  <input type="checkbox" formControlName="fromStates" ngModel required>
 </div>
 <!-- States -->
 <div class="formGroup">
  <label>States :</label>
   <select formControlName="state">
    <option value="co">Colordo</option>
    <option value="ca">California</option>
   </select>
 </div>


 <div class="formGroup">
  <label>formControlName </label>
   <select formControlName="state">
    <option value="co">Colordo</option>
    <option value="ca">California</option>
   </select>
  </div>
  <hr/>

<div  formArrayName="homeAddress">
 <button>Delete</button>
 <div *ngFor="let address of this._formObject.controls.homeAddress.controls; 
 let i=index">
  <div [formGroupName]="i">
  <div class="formGroup">
   <label>St Name :</label>
   <input type="text" placeholder="" formControlName="stName" ngModel 
   required>
 </div>
 <div class="formGroup">
   <label>Apt Number :</label>
   <input type="text" placeholder="" formControlName="aptNo" ngModel 
   required>
 </div>
 <div class="formGroup">
  <label>Pincode :</label>
  <input type="text" placeholder="" formControlName="pinCode" ngModel 
  required>
 </div>

 <!-- <div class="formGroup">
  <label>Add Label: </label>
  <input type="text" placeholder="Label Title" 
  formControlName="addLabelTitle">
  <input type="text" placeholder="Type (Text, Checkbox, etc)" 
  formControlName="addLabelType">
 </div> 
 -->
 </div>
 <hr/>
 </div>


 <div class="formGroup text-center">
  <button (click)="_addAddress()">Add address</button>
  <!-- Submit -->
  <button (click)="_submitValue()">Submit</button>
  <!-- Cancel -->
  <button (click)="_resetValue()">Cancel</button>
  </div>
 </div>

Answer 1

你需要在你的表单数组中添加一个表单组，如果你想使用你拥有的Address类，你可以这样做

_addAddress() {
  let formArr = this._formObject.controls.homeAddress;
  formArr.push(this._formBuilder.group(new Address('','','')))
}

您可以从表单中删除所有 ngModel 和 required，这些属于模板驱动表单。

表单的构建是我会创建一个空的 FormArray，然后在表单构建之后调用 _addAddress，因为您可能需要在表单数组中有一个初始表单组。

作为旁注，我看不到以下内容是否有效(？)

homeAddress:this._formBuilder.array([Address])

所以我会放弃它并做:

_createFormGroup(){
  this._formObject = this._formBuilder.group({
    // all other form controls here
    homeAddress:this._formBuilder.array([])
  });
  this._addAddress();
}