web-dev-qa-db-ja.com

Angular 2最小および最大の数値のフォーム検証

入力ボックスのあるフォームがあります。入力ボックスは、テキストと数字の両方のタイプです。そして、私はそれらを検証しなければなりません、そして、私はこれに従いました tutorial そしてそれらを検証しようとしました。

それによると、文字列を検証する必要がある場合は、次のようにコントロールグループを使用できます。

constructor(fb: FormBuilder){
    this.complexForm = fb.group({
      'firstName' : [null, Validators.required],
      'lastName': [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])]
})

このためのHTMLコードは次のとおりです...

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">
      <div class="form-group">
        <label>First Name:</label>
        <input class="form-control" type="text" placeholder="John" [formControl]="complexForm.controls['firstName']">
      </div>
      <div class="form-group">
        <label>Last Name</label>
        <input class="form-control" type="text" placeholder="Doe" [formControl]="complexForm.controls['lastName']">
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
</form>

ただし、次の例のように、数値型の入力ボックスも検証する必要があります。

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">
          <div class="form-group">
            <label>Age:</label>
            <input class="form-control" type="number"  [formControl]="complexForm.controls['age']">
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-default">Submit</button>
          </div>
</form>

しかし、問題は、入力の最小値と最大値を選択するバリデーターのオプションがないことです。

誰かがこの問題の解決策を持っていますか？

ありがとう。

javascriptformsvalidationangulartypescript
10
Dilanka Rathnayake

現在、最小/最大の組み込みバリデーターはありません。 source for Validator をチェックアウトして、利用可能なものを確認できます。

できることは、 公式ドキュメントのチュートリアル の後にカスタム検証関数を作成することです

例：

export function maxValue(max: Number): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} => {
    const input = control.value,
          isValid = input > max;
    if(isValid) 
        return { 'maxValue': {max} }
    else 
        return null;
  };
}

これにより、コードを更新できます

constructor(fb: FormBuilder){
this.complexForm = fb.group({
  'firstName' : [null, Validators.required],
  'lastName': [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])],
  'age': [null, maxValue(60)]
})
11
jkris

angular 4の現在のバージョンには、現在、 最小および最大バリデーター があります。

書くのと同じくらい簡単です

this.complexForm = fb.group({
   age:[null,[Validators.required, Validators.min(5),Validators.max(90)]],
})

@angular/formsレポ

$: npm uninstall @angular/forms --save
$: npm install @angular/forms --save
21
user1752532

問題が正しければ、バリデーターの要件もHTMLに含めて、コードが次のようになるようにします。

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">
  <div class="form-group">
    <label>Age:</label>
    <input class="form-control" type="number" required minlength="5" maxlength="10" [formControl]="complexForm.controls['age']">
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-default">Submit</button>
  </div>
</form>
4
Marcin