創建一個動態字段不工作的添加按鈕

Question

我想創建一個動態字段與地址類的添加按鈕和刪除按鈕。我堅持爲什麼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

你需要一個formgroup添加到您的形式排列，如果你喜歡Address你必須使用這個類，你可以做到這一點通過

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

您可以從表單中刪除所有ngModel和required，這些屬於模板驅動的表單。

表單的構建是我將創建一個空的FormArray，然後在構建表單後調用_addAddress，因爲您可能需要表單數組中的初始formgroup。

一點題外話，我看不到下面會甚至工作

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

因此，我將取消這一點，做（？）：

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