Question

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

＆＃13;

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.
*/
}

＆＃13;

<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>

＆＃13;

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();
}

为动态字段创建无法正常工作的添加按钮

1 个答案: