複数のフィールドでの角4フォームの検証

Question

編集： 私が達成したいのは、フォーム全体ではなく、単一のformControlでの検証です。バリデーターは、ハウスナンバー、通りなどのすべての原子フィールドをチェックし、次にGoogleマップ入力コントロールを無効にする必要があります。

---

私はGoogle Mapsのオートコンプリートを使用してフォームをプログラミングしています。 ユーザーは、Googleマップオートコンプリートロジックを起動する入力フィールドにアドレスを入力する必要があります。アドレスが選択されると、コールバック関数は通り、家の番号などを選択し、APIの結果を使用して必要な住所データフィールドを記入します。 他のフォーム要素は表示されますが読み込み専用ですので、常に有効なデータを取得し、入力に対して検証を実行できます。

問題は、バリデータが入力フィールドをトリガしないことです。主入力フィールドは常に有効で、無効無効クラスを取得しません。

@Component({ 
    selector: 'my-app', 

    styles: [` 
    .ng-valid { 
     border:#0ff; 
    } 

    .ng-invalid { 
     border:#f00; 
    } 
    `], 
    template: ` 

    <form [formGroup]="testForm"> 
       <input type="text" formControlName="address"> 
       <input type="text" formControlName="tel"> 
       <input type="text" formControlName="mail"> 
      </form> 
    ` 
}) 
export class AppComponent { 
    testForm:FormGroup; 


    constructor(private fb: FormBuilder) { 
    this.testForm = this.fb.group({ 
      address:['', myValidator], 
      tel:[''], 
      mail:[''] 
     }, { 
      validator: myValidator("tel", "mail") 
     }); 
    } 
} 

export const myValidator = (field1, field2): ValidatorFn => (control: AbstractControl) => { 
     if(control.get(field1).value=="test" && control.get(field2).value=="test2") { 
      return null; 
     } 
     return { myValidator: { valid: false } }; 
    } 

あなたがアクションでそれを見ることができますので、私はそれのpunkerをした： https://plnkr.co/edit/2kncVT6thQTU1HMCmyTy?p=preview

Answer 1

私はあなたの検証は、あなたがちょうどこの

<form [formGroup]="testForm"> 
    <input type="text" formControlName="address"> 
    <input type="text" formControlName="tel"> 
    <input type="text" formControlName="mail"> 
</form> 
<span *ngIf="!testForm.errors.myValidator">Incorrect<span> 

などの確認のためのメッセージを表示する必要が正しいだと思います

とあなたの検証、使用中のこの

if(control.get(field1).value=="test" && control.get(field2).value=="test2") { 
     return { myValidator: true } 
    } 
    return { myValidator: false }; 

Answer 2

フォームとバリデーションが機能しているようです。私はあなたのplunkerを更新して、テンプレートに2つのdivを追加しました：

<form [formGroup]="testForm"> 
    <input type="text" formControlName="address"> 
    <input type="text" formControlName="tel"> 
    <input type="text" formControlName="mail"> 
</form> 
<div *ngIf="testForm.valid">Your form is valid! yay!</div> 
<div *ngIf="testForm.invalid">Your form is invalid!</div> 

ここで更新plunkです：

https://plnkr.co/edit/wqMdBQFvj2pIjJkWeCoV?p=preview