web-dev-qa-db-ja.com

angular 4？で条件付きでフォーム入力を要求する方法

タスクを追加するためにテンプレート駆動フォームを使用しており、タスクを完了するための推定最小値のタイプ番号の2つの入力フィールドがあります。

  • 1つのフィールドは、推定時間数と
  • もう1つは、タスクを完了するための推定時間です。

タスクの見積もりは1hrsのような時間単位で、または1Hrs 30Minsのような時間と分単位で行うことができるため、属性を設定したいrequired条件付きで入力します。したがって、2つの入力のいずれかを設定する必要があります。そうしないと、フォームの送信時に両方の入力が空の場合、フォーム検証エラーが発生します。

これまでのところこれを行っていますが、検証が機能していません

<form class="add-task" (ngSubmit)="onSubmit(newtask)" #newtask="ngForm">  
    <div class="estimate-container">
        <input 
            type="number" 
            min="0" 
            max="10" 
            id="estimate_hrs" 
            ngModel 
            name="estimate_hrs"
            mdInput 
            [required]="!estimateMins.valid" 
            placeholder="Estimated Hours" 
            #estimateHrs="ngModel"
        >
        <div class="error-msg" *ngIf="!estimateHrs.valid && !estimateMins.valid">
            Please enter estimated hours 
        </div>
        <input 
            type="number" 
            min="0" 
            max="60" 
            id="estimate_min" 
            ngModel 
            name="estimate_min" 
            mdInput 
            [required]="!estimateHrs.valid" 
            placeholder="Estimated Minutes" 
            #estimateMins="ngModel"
        >
        <div class="error-msg" *ngIf="!estimateMins.valid && !estimateHrs.valid">
            Please enter estimated minutes
        </div>   
    </div>
    <button type='submit' [disabled]="!newtask.valid" >Submit</button>
</form>
formsangularvalidation
14
R.K

代わりに[attr.required]を使用してみてください。

   <input 
        type="number" 
        min="0" 
        max="10" 
        id="estimate_hrs" 
        ngModel 
        name="estimate_hrs"
        mdInput 
        [attr.required]="!estimateMins.valid" 
        placeholder="Estimated Hours" 
        #estimateHrs="ngModel"
    >
11
DeborahK

!estimateMins.validのような単一引用符で囲みます：

[required]="'!estimateMins.valid'"および[required]="'!estimateHrs.valid'"

こちらをご覧ください plunkr

6
penleychan

これはAngular 5：

コンポーネント内：

@Input()
required: boolean;

入力（または選択）要素のテンプレート：

[required]="required"

セレクターで：

[required]="true"

ダブルチェックされた@DeborahKのように、一重引用符は必要ありません:-)

5
Pim Hazebroek

基本的な構文が機能するはずだったので、これを試してみました。最初に構文をテストするために単純なプランカーを実行しましたが、構文は実際に定義どおりに機能します。

OPのコードにより一致するようにプランカーを拡張した後： https://plnkr.co/edit/QAqeBYrg19dXcqbubVZ8?p=preview

<Links to plunker must be accompanied by code>

構文エラーではないことが明らかになりましたnot。むしろ、それは論理エラーです。

フォームが最初に表示されるとき、両方のコントロールは有効であるため、どちらも必須属性を持ちません。そのため、どちらも必要ではなく、機能しないようです。

これを解決する方法はいくつかあります。 1つは、クロスフィールド検証を行うカスタムバリデーターを構築することです。

2
DeborahK