Построитель форм с hasError () для проверки выдает ошибку ошибки TypeError: не удается прочитать свойство "hasError" неопределенного

Привет я реализую форму в angular 2 с помощью Form Builder

в компонент.ts я реализовал свою форму с помощью formGroup

ниже мой код 

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: [''],

    });

}

Он работает нормально. Но когда вы приходите, чтобы отобразить проверки в frontEnd

Я такой 

  <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>

он работает, но бросает ошибку в консоли, как показано ниже

ошибка TypeError: не удается прочитать свойство "hasError" неопределено

пожалуйста, помогите мне, как сортировать это.

Спасибо.

7
angular angular-forms angular-reactive-forms angular-validation angular2-formbuilder

3 ответов

вы должны использовать его следующим образом:

<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>
12

я столкнулся с этой проблемой в angular 5 попробуйте ниже, вы получите выход

<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

Я решил это так :

<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