web-dev-qa-db-ja.com

検証用にhasError（）を使用したフォームビルダーは、エラーTypeError：未定義のプロパティ 'hasError'を読み取れません

こんにちは、Form Builderを使用してangular 2でフォームを実装しています

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

    });

}

正常に動作しています。しかし、フロントエンドで検証を表示するようになると

私はこのように使用しました

  <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'を読み取れません

これをソートする方法を教えてください。

ありがとうございました。

angularangular2-formbuilderangular-reactive-formsangular-validationangular-forms
9
Chinna M

次のように使用する必要があります。

<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

リアクティブフォームを使用している場合は、おそらくTypeScriptゲッターを使用してこれを解決する必要があります。

リアクティブフォームでは、親グループのgetメソッドを介していつでもフォームコントロールにアクセスできますが、テンプレートの短縮形としてゲッターを定義すると便利な場合があります。

ゲッターを使用すると、上記の例のngIfで_myForm.controls['fieldNameGoesHere']._を重複して使用することなく、フォームフィールドに直接アクセスできます。

例として、_company_address2_の場合、ngOnInit()メソッドの後に以下を追加します。

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

これにより、コンポーネントHTMLが_company_address2_に直接アクセスできるようになり、代わりにこれを試してください：

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

ただし、各getterメソッドを個別に定義する必要があります。TypeScriptではgetterに変数を提供することはできないため、フォーム内の各コントロールに1つのgetメソッドが必要になります。

詳細は、Angular docs Form Validation：Built-in Validators の下にあります。

2
Kevin Leary

私はこれをこのように解決しました：

<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

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