web-dev-qa-db-ja.com

Angular 5ブラーの検証のみ？

ぼかしのリアクティブフォームで検証を行うことが可能かどうか疑問に思います。現時点では、updateOn: "blur"しかし、入力フィールドの値は入力時に更新されません。私の場合、私はそれで計算を行い、ユーザーに結果を表示するため、キーストロークごとに値を更新する必要があります。検証はぼかしでのみ行われます。

tHX。

編集：

FormBuilder、一部のビルドバリデーター、および一部のカスタムバリデーターを使用します。サンプルコード：

let formToMake = {
  purpose: [null, Validators.required],
  registrationDate: this.fb.group({
    day: [null, Validators.required],
    month: [null, Validators.required],
    year: [null, Validators.required]
  }),
  isTruth: [null, Validators.compose([checkIfTrue, Validators.required])]
};

Blurイベントを使用する場合、すべての検証を手動で行う必要がありますが、これは良い方法ではないと思います。

javascriptangularangular5angular-validation
6
timfrans

最終的に私がやったこと：

リアクティブフォームの使用：

[〜＃〜] ts [〜＃〜]

これが作成するフォームです。 productCostとloanAmountはblurで検証する必要がありましたが、onchangeを更新するには値自体が必要でした。 updateOn: "blur"を設定すると、ぼかしイベント後に検証が行われますが、値はぼかしイベント後に更新されます。

let formToMake = {
      productCost: new FormControl(null, {validators: Validators.required, updateOn: "blur"}),
      loanAmount: new FormControl(null, {validators: Validators.compose([Validators.required, Validators.min(2500)]), updateOn: "blur"}),
      loanLength: new FormControl(49, {validators: Validators.required, updateOn: "change"})
    };

handleInputメソッド：

これを解決するために、入力イベントで呼び出されるイベントハンドラーを作成しました。

[〜＃〜] ts [〜＃〜]

handleInput(e: any) {
    this.loanAmount = e;
  }

[〜＃〜] html [〜＃〜]

<input class="form__input" type="number" value="{{loanForm.get('loanAmount').value}}" id="loanAmount" formControlName="loanAmount" (input)="handleInput($event.target.value)">
9
timfrans

updateOnはプロパティアクセサメソッドのみです。入力HTMLタグには、その利便性のために使用できるblurという名前のイベントバインドがあります。

公式ドキュメントのURL。 https://angular.io/guide/user-input#on-blur

0
Antonio de la mata

Angular要素でng-bindingを探していると思います。たとえば、入力フィールドに対してキーストロークにバインドし、次のようにぼかします。

_<input type=text (blur)="validate()" (keypress)="eventHandler($event)">

eventHandler(event) {
   console.log(event, event.keyCode, event.keyIdentifier);
   // Update value of string on every keystroke
} 

validate() {
   // Validation code goes here
}
_

また、ngModelを使用すると、文字列が自動的に更新されるため、キーストロークをまったく心配する必要がなくなります。次のようになります。

_<input [(ngModel)]="name" (blur)="validate()">

name: string;

validate() {
   // Validation code goes here
}
_

Reactive Formsモジュールの使用とその検証を検討しているため、次のようなことができます。

テンプレートアプローチ

<input [(ngModel)]="lastname" [ngModelOptions]="{ updateOn: 'blur' }">

NgModelバインディングは、キーストロークごとに入力を変更するため、手動で入力する必要はありません。これは現在あなたが求めていることなので、このアプローチを取ることを本当にお勧めします。

リアクティブフォームアプローチ

_this.nameForm = new FormGroup ({
  firstname: new FormControl('', {
    validators: Validators.required,
    updateOn: 'submit'
  }),
  lastname: new FormControl('', {
    validators: Validators.required,
    updateOn: 'submit'
  })
});
_

参照： SOアプローチ中記事

0
mclem