Nicht acces Control-Instanz direkt. Cannot read property '' invalid ' undefined

Kann nicht acces es in der gleichen Weise wie in Eckige docs, so zu packen, die FormGroup ersten Instanz und finden FormControl Instanz drin.. ich Frage mich, warum? Dieses Beispiel funktioniert:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="username">Username</label>
    <input 
      type="text"
      name="username"
      class="form-control"
      formControlName="username"
    >
    <div *ngIf="myForm.controls.username.invalid" class="alert alert-danger">
      username is required
    </div>
  </div>

Während dies wirft Fehler (Unterschied zwischen diesen nur in *ngIf-Anweisung):

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="username">Username</label>
    <input 
      type="text"
      name="username"
      class="form-control"
      formControlName="username"
    >
    <div *ngIf="username.invalid" class="alert alert-danger">
      username is required
    </div>
  </div>

Cannot read property '' invalid ' undefined

form.Komponente:

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

@Component({
  selector: 'sign-up',
  templateUrl: 'app/sign-up.component.html'
})

export class SignUpComponent {

  myForm = new FormGroup({
    username: new FormControl('username', Validators.required),
    password: new FormControl('', Validators.required),
  });
}

InformationsquelleAutor Julius Dzidzevičius | 2017-06-16

  1. 18

    Wirft es Fehler, weil Sie nicht über eine variable namens username oder password.

    Um dieses Problem zu lösen, können Sie Folgendes tun:

    export class SignUpComponent implements OnInit {

  myForm: FormGroup;
  usernameCtrl: FormControl;
  passwordCtrl: FormControl;

  ngOnInit() {
    this.usernameCtrl = new FormControl('username', Validators.required);
    this.passwordCtrl = new FormControl('', Validators.required);

    this.myForm = new FormGroup({
      username: this.usernameCtrl,
      password: this.passwordCtrl
    });
  }
}

    ... oder mit FormBuilder:

    export class SignUpComponent implements OnInit {

  myForm: FormGroup;
  usernameCtrl: FormControl;
  passwordCtrl: FormControl;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.usernameCtrl = this.formBuilder.control('username', Validators.required);
    this.passwordCtrl = this.formBuilder.control('', Validators.required);

    this.myForm = this.formBuilder.group({
      username: this.usernameCtrl,
      password: this.passwordCtrl
    });
  }
}

    Jetzt können Sie es direkt in das template, so wie hier:

    <div class="alert alert-danger" *ngIf="usernameCtrl.invalid">
  username is required
</div>

    Auch, wenn Sie möchten, können Sie verwenden [formControl] statt formControlName:

    <input 
  type="text"
  name="username"
  class="form-control"
  [formControl]="usernameCtrl">

    PLUNKER

    Ok... ich hatte erwartet, etwas ein bisschen einfacher.. Und bedeutet es, dass das Beispiel von docs ist falsch...? Winkel.io/api/Formulare/FormGroupDirective
    Nein, die Dokumente sind korrekt. Es gibt eine get Methode namens first dass die Rendite der FormControl first.

    InformationsquelleAutor developer033

  2. 8

    Können Sie lösen dieses Problem mit einem Form-Gruppe und die Festlegung der entsprechenden Getter in Ihrer Steuerung. Um dieses Ziel zu erreichen:

    In der Steuerung:

    1) Entfernen Sie die Formular-Steuerelement-Variablen definition und Initialisierung

    usernameCtrl: FormControl;
passwordCtrl: FormControl;
...
this.usernameCtrl = this.formBuilder.control('username',Validators.required);
this.passwordCtrl = this.formBuilder.control('', Validators.required);

    2)Ändern Sie die form-Gruppe der Initialisierung zu diesem

    ngOnInit() {
this.myForm = this.formBuilder.group({
  username: ['usename', Validators.required]
  password: ['', Validators.required]
});

    }

    3) Fügen Sie die Getter

    get username() { return this.myForm.get('username'); }
get password() { return this.myForm.get('password'); }

    In der Vorlage:

    1) fügen Sie einen parent-div mit [formGroup]="MyForm"

    <div [formGroup]="myForm">
...
</div>

    2) ändern Sie [Control]="usernameCtrl" für forcontrolName=Benutzername und *ngIf="usernameCtrl.ungültig" *ngIf="username.ungültig"

    <input type="text"
       name="username"
       class="form-control"
       formControlName="username">
  <div *ngIf="username.invalid" class="alert alert-danger"> 
    username is required
  </div>

    3) ändern Sie die [Control]="passwordCtrl" für forcontrolName=Passwort und *ngIf="passwordCtrl.ungültig" *ngIf="Passwort.ungültig"
    te.

    <input type="text"
       name="password"
       class="form-control"
       formControlName="password">
  <div *ngIf="password.invalid" class="alert alert-danger">
    password is required
  </div>

    Plunker

    Das ist in Ordnung. Was, wenn ich in 15 Felder in einem Formular...

    InformationsquelleAutor Javier Rojano

  3. 3

    Bei mir funktioniert:

    form.Komponente:

    getFormControl(name) {
    return this.Form.get(name);
}

    Vorlage:

    <input 
  type="text"
  name="username"
  class="form-control"
  formControlName="username"
>
<div *ngIf="getFormControl('username').invalid" class="alert alert-danger">
  username is required
</div>

    InformationsquelleAutor Alexey Volynshchikov

Schreibe einen Kommentar