7

入力フィールドをラップするコンポーネントがあります。Controlコンポーネントでは、からオブジェクトを受け取ります@Input() inputControl: Control;。テンプレートには、コンポーネントの入力フィールドが不要な場合にメッセージを表示するスパンがあります。

<span
  class="input-label-caption">
  (optional)
</span>

と入力

<input
    *ngIf="inputMode=='text' || inputMode=='email'"
    type="{{inputMode}}"
    [ngFormControl]="inputControl"
    placeholder="{{placeholder}}"
    class="input-text"
    [disabled]="inputDisabled"
    [ngClass]="{
    'inverted': inverted
    }">

inputControlが含まれている場合、フォームオブジェクトを読み取るにはどうすればよいValidators.requiredですか? たとえば、このように使用できるかどうかを知りたい

<span
  class="input-label-caption"
  *ngIf="!inputControl.validators.required"
  >
  (optional)
</span>
4

3 に答える 3

6

この式を使用してみることができます:

<span
  class="input-label-caption"
  *ngIf="!inputControl.errors?.required"
>
  (optional)
</span>

このerrors属性には、失敗したバリデータの名前ごとに 1 つのエントリが含まれます。

errors検証エラーがなければ未定義になる可能性があるため、属性には Elvis 演算子を使用します。

編集

Validators.requiredあなたのコメントに従って、関数で === 演算子を直接使用して、「必要な」バリデーターを確認できると思います。実際、バリデーターは単なる関数であり、Validators.required関数は「必要な」検証に使用されます。

対応するコードは次のとおりです。

this.hasRequiredValidator = (this.inputControl.validator === Validators.required);

属性が配列の場合、関数が配列に存在validatorするかどうかを確認するために、テストを少し拡張する必要があります。Validators.required

テンプレートのコードは次のようになります。

(オプション)

お役に立てば幸いです、ティエリー

于 2016-01-18T16:47:57.870 に答える
0

少し遅れましたが、私にとってうまくいったのは、コントロールにvalidatororasyncValidatorメソッドがあるかどうかを確認することでした。このようにして、コントロールに同期バリデーターまたは asyncValidator があるかどうかがわかります。次に、メソッドを呼び出すバリデーターを知りたい場合。

同期検証:

const getSyncValidators= (control: FormControl) => {
   if(control.validator) {
     return control.validator({} as AbstractControl);
   };
};

非同期検証:

const getAsyncValidators= (control: FormControl) => {
   if(control.asyncValidator) {
     return control.asyncValidator({} as AbstractControl);
   };
};

非同期バリデーターの場合、非同期バリデーターの名前が表示されないオブザーバブルを取得します。

非同期バリデータがあることだけを知りたい場合は、簡単な方法です。

control.validator または control.asyncValidator が存在することを常に確認してください。これは、関数が存在しないためにバリデーターがないコントロールがエラーをスローするためです。

于 2021-02-05T14:36:22.507 に答える