web-dev-qa-db-ja.com

Angular 4つのフォームを複数のフィールドで検証

EDIT：私が達成したいのは、フォーム全体ではなく、単一のformControlでの検証です。バリデーターは、家番号、通りなどのすべてのatomフィールドをチェックしてから、Googleマップの入力コントロールを無効にする必要があります。

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

問題は、バリデーターが入力フィールドをトリガーしないことです。メイン入力フィールドは常に有効であり、ng-invalidクラスを取得しません。

@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 } };
    }

私はそれのパンクを作ったので、あなたはそれが実際に動いているのを見ることができます： https://plnkr.co/edit/2kncVT6thQTU1HMCmyTy?p=preview

angularvalidationtypescriptangular-reactive-forms
6
Cedric

私はあなたの検証が正しいと思いますあなたはこのような検証のためのメッセージを表示する必要があります

<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  };
2
Abhishek Singh

フォームと検証が機能しているようです。プランカーを更新し、テンプレートに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>

更新されたプランクは次のとおりです。

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

3
RagnarLodbrok