web-dev-qa-db-ger.com

Form Builder mit hasError () zur Validierung löst einen Fehler vom Typ ERROR aus: Die Eigenschaft 'hasError' von undefined kann nicht gelesen werden

Hallo, ich implementiere ein Formular in angular 2 mit Form Builder

in component.ts habe ich mein Formular mit formGroup implementiert

Unten ist mein Code

public myForm: FormGroup;

constructor(private authenticateservice: AuthenticateService,
              private _fb: FormBuilder
             ) {


}

ngOnInit() {

this.myForm = this._fb.group({
      address: [this.userDetails.address, [<any>Validators.required]],
      address2: ['', [<any>Validators.required]],
      city: ['', [<any>Validators.required]],
      company_address: ['', [<any>Validators.required]],
      company_address2: ['', [<any>Validators.required]],
      company_city: ['', [<any>Validators.required]],
      company_country: ['', [<any>Validators.required]],
      company: ['', [<any>Validators.required , Validators.minLength(3)] ],
      company_tax_number: ['', [<any>Validators.required]],
      company_Zip: ['', [<any>Validators.required,  Validators.minLength(5) , Validators.maxLength(7)]],
      country: ['', [<any>Validators.required]],
      email: ['', [<any>Validators.required, Validators.email]],
      first_name: [this.userDetails.first_name, [<any>Validators.required]],
      id: ['', [<any>Validators.required]],
      last_name: ['', [<any>Validators.required]],
      phone: ['', [<any>Validators.required, Validators.minLength(10)]],
      Zip: ['', [<any>Validators.required , Validators.minLength(5) , Validators.maxLength(7)]],
      user_type: ['2', [<any>Validators.required]],
      terms: [0, [<any>Validators.required]],
      hash_tag: [''],

    });

}

Es funktioniert gut. Aber wenn es darum geht, Validierungen in frontEnd anzuzeigen

Ich habe so verwendet

  <div class="form-group row">
    <div class="col-lg-8">
      <label>Address 2</label>
      <textarea class="form-control" placeholder="Address" rows="2" [readonly]="disabled" id="companyaddress2" formControlName="company_address2"></textarea>
      <span class="help-block form-error text-danger small" *ngIf="myForm.controls['company_address2'].hasError('required')">Company Address 2 is Required.</span>
    </div>
  </div>

es funktioniert, wirft aber den Fehler in die Konsole wie unten

ERROR TypeError: Die Eigenschaft 'hasError' von undefined kann nicht gelesen werden.

Bitte helfen Sie mir, wie das zu sortieren ist.

Danke.

9
Chinna M

Du solltest es so benutzen:

<span class="help-block form-error text-danger small" 
  *ngIf="myForm.controls['company_address2'].errors?.required &&
  myForm.controls['company_address2'].touched">Company Address 2 is Required </span>
15
monica

Wenn Sie mit reaktiven Formularen arbeiten, sollten Sie wahrscheinlich TypeScript-Getter verwenden, um dieses Problem zu lösen.

In einem reaktiven Formular können Sie jederzeit über die get-Methode der übergeordneten Gruppe auf jedes Formularsteuerelement zugreifen. Manchmal ist es jedoch hilfreich, Getters als Abkürzungen für die Vorlage zu definieren.

Mit einem Getter können Sie direkt auf ein Formularfeld zugreifen und die redundante Verwendung von myForm.controls['fieldNameGoesHere']. Mit ngIf in den obigen Beispielen vermeiden.

Fügen Sie beispielsweise für company_address2 Nach Ihrer ngOnInit() -Methode Folgendes hinzu:

get company_address2() { return this.myForm.get( 'company_address2' ); }

Dadurch erhält Ihre HTML-Komponente direkten Zugriff auf den company_address2. Probieren Sie dies stattdessen aus:

<textarea class="form-control" placeholder="Address" rows="2" [readonly]="disabled" id="companyaddress2" 
    formControlName="company_address2">
</textarea>

<span class="help-block form-error text-danger small"
    *ngIf="company_address2.hasError('required')">
    Company Address 2 is Required.
</span>

Sie müssen jedoch jede Getter-Methode einzeln definieren. TypeScript lässt nicht zu, dass Variablen für Getter bereitgestellt werden, sodass Sie für jedes Steuerelement in Ihrem Formular eine Get-Methode haben.

Weitere Informationen finden Sie in den Angular docs unter Form Validation: Built-in Validators .

2
Kevin Leary

Ich habe das so gelöst:

<span class="help-block form-error text-danger small" 
*ngIf="myForm.controls.company_address2.errors?.required &&
myForm.controls.company_address2.touched">
Company Address 2 is Required </span>
0
Jobaer Khan

Ich habe dieses Problem in angular 5 versuchen Sie die folgende Ausgabe erhalten Sie

<mat-error>
<span class="help-block form-error text-danger small" 
  *ngIf="myForm.controls['company_address2'].errors?.required &&
  myForm.controls['company_address2'].touched">Company Address 2 is Required </span>
</mat-error>
0
Karthi Loks