フォームグループの検証がカスタム作成コンポーネントで機能しない

Question

いくつかのドロップダウンリストを持つコンポーネントがあります。ドロップダウンが選択されると、カスタムコンポーネントがロードされ、テキストボックスが含まれます。 たとえば、ユーザーがドロップダウンから特定のオプションを選択すると、1ページに3つのコントロールがあり、4番目のテキストボックスは別のコンポーネントから読み込まれます。

4番目のテキストボックスが空の場合、送信ボタンを無効にする方法次

はあなたが結合角度属性を使用し、そのように、フォームの有効な状態を保持する変数を渡すことができ、ボタンを無効にするには、カスタム・コンポーネントのためのHTMLコード

<input class="form-control" type="text" value="" 
    [(ngModel)]="configurationData.sno" name="sno" required> 

Answer 1

です：

<button [disabled]="!ValidForm">Click</button> 

フォームが有効な場合は無効にしないでください。フォームが無効な場合は、ボタンにdisableプロパティを追加してください。

またはあなたの入力コンポーネントを使用して、我々は、入力が空の場合、それは価値がある場合、それは真と評価されます、falseと評価空の文字列を返しますが、その入力のためのngModelを渡すことができます。

<button [disabled]="!configurationData.sno">Click</button> 

私たちは '！' ngModel変数の前に 'false'または空文字列の無効なプロパティを無効にする変数が必要なためです。