webentwicklung-frage-antwort-db.com.de

Die Eigenschaft 'Steuerelemente' ist beim Typ 'AbstractControl' nicht vorhanden Angular 4

Ich versuche eine verschachtelte reaktive Form in Angular 4. Es funktioniert gut, aber wenn ich versuche, AOT zu erstellen, wird der Fehler ausgegeben 

'Steuerelemente' gibt es nicht beim Typ 'AbstractControl'

Ich googelte und versuchte ein paar Dinge, aber kein Glück. Könnte mir jemand sagen, wie ich dieses Problem beheben kann? 

<div [formGroup]="myForm">
    <div formArrayName="addresses">
        <div *ngFor="let address of myForm.get('addresses').controls; let i=index" 
                    class="panel panel-default">
            <span *ngIf="myForm.get('addresses').length > 1"
                    (click)="removeAddress(i)">Remove</span>
            <div [formGroupName]="i">
                <mat-form-field>
                    <input matInput formControlName="city" placeholder="city" value="">
                </mat-form-field>
            </div>

        </div>
    </div>
    <a (click)="addAddress()" style="cursor: default"> Add +</a>
</div>

Geben Sie den folgenden Code ein

constructor(private _fb: FormBuilder) {     
}

ngOnInit() {
    this.myForm = this._fb.group({
        addresses: this._fb.array([
            this.initAddress(),
        ])
    });
}
initAddress() {
    return this._fb.group({
        city: ['']
    });
}
addAddress() {
    const control = <FormArray>this.myForm.get('addresses');
    control.Push(this.initAddress());
}
removeAddress(i: number) {
    const control = <FormArray>this.myForm.get('addresses');
    control.removeAt(i);
}
angulartypescriptangular2-formsangular4-forms
8
Munna

Basierend auf @ Günter Zöchbauer Kommentaren, habe ich mich zuerst verändert 

myForm.controls['addresses'] bis myForm.get('addresses') in HTML und TypeScript 

und dann basierend auf @yuruzi Kommentar 

myForm.get('addresses').controls in myForm.get('addresses')['controls'] geändert

Es funktioniert jetzt gut. Vielen Dank @ Gunter & Yuruzi

25
Munna

Sie können es jedoch leicht beheben. Lagern Sie die "Get the Control" -Logik in eine Methode Ihres Komponentencodes (die .ts-Datei) aus:

`getControls() {
  return (<FormArray>this.recipeForm.get('controlName')).controls;
}`

In der Vorlage können Sie dann Folgendes verwenden:

*ngFor="let ingredientCtrl of getControls(); let i = index"

Diese Anpassung ist aufgrund der Funktionsweise von TS erforderlich, und Angular analysiert Ihre Vorlagen (TS ist dort nicht bekannt).

1
sunny kashyap

Als Update zu @sunny kashyap würde ich es so schreiben:

getControls() {
  return (this.recipeForm.get('controlName') as FormArray).controls;
}
1
Motasem Halawani

für Validierungsfehler verwenden Sie ...

<span *ngIf="f.YOUR_FORM_KEY.controls.YOUR_FORM_KEY.errors?.YOUR_FORM_VALIDATION">YOUR_FORM_KEY is YOUR_FORM_VALIDATION</span>

z.B.

<span *ngIf="f.name.controls.name.errors?.required">Name is required</span>

ts datei

get f(): any {
    return this.userForm.controls;
}
0
Mhar Daniel

um die Länge einer FormArray zu erhalten, verwenden Sie einfach length:

<span *ngIf="myForm.controls['addresses'].length > 1" (click)="removeAddress(i)">Remove</span>

Ich hoffe es hilft

0
Mohamed Ali RACHID

Ändern Sie myForm.get('addresses').controls in myForm.get('addresses').value, um das Problem ebenfalls zu beheben.

0
Advait Baxi