Erstellen einer Schaltfläche zum Hinzufügen für dynamische Felder funktioniert nicht

Question

Ich versuche, ein dynamisches Feld mit einer Schaltfläche hinzufügen und eine Schaltfläche zum Löschen mit der Klasse Adresse erstellen. Ich bin fest, warum die Funktion AddAddress nicht funktioniert. Ich suchte nach einer Lösung, aber nichts, was ich gesucht habe, hat funktioniert. Ich bin ein Anfänger mit Angular, also könnte ich das komplizierter machen, als es sein muss. Hier ist die 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

Sie benötigen einen formgroup zum Formular Array hinzuzufügen, wenn Sie die Klasse verwenden möchten Address Sie haben, Sie können es durch

Sie können alle ngModel und required aus Ihrem Formular entfernen, diese gehören zu Vorlage getriebenen Formularen.

Der Build des Formulars ist, ich würde ein leeres FormArray erstellen, und rufen Sie dann _addAddress nach dem Erstellen des Formulars, da Sie wahrscheinlich eine erste Formulargruppe in Ihrem Formular-Array möchten.

Als Nebenbei bemerkt, kann ich nicht sehen, dass die folgenden würde auch funktionieren

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

So würde ich Schrott das und tun (?):

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