子コンポーネントと角2の検証

Question

親コンポーネントの内部に子コンポーネントがあります。どちらも必須フィールドがあります。最後に、両方のコンポーネントが有効な場合（必要なすべてのフィールドがこの場合に入力されている場合のみ）、送信ボタンを有効にする必要があります。

テンプレート駆動型の検証では、これをどうすれば実現できますか？あなたはform.valid値を放出する子で@Output変数を作成することができます

SEEDコード

親コンポーネント

@Component({ 
    selector: 'parent-comp', 
    templateUrl: 'parent.html' 
}) 
export class Parent { 

} 

<input pInputText name="txt1" id="txt1" 
         required/> 

<child-comp></child-comp> 

<button pButton type="button" label="Submit" 
      [disabled]="IF ONE OF THE COMPS IS NOT VALID"></button> 

子コンポーネント

@Component({ 
    selector: 'child-comp', 
    templateUrl: 'child.html' 
}) 
export class Child { 

} 

<input pInputText name="txt2" id="txt2" 
         required/> 

Answer 1

。 FormBuilderとFormGroupを使用する必要があります（ここでは表示されません）。

フォーム内で何かを変更するたびに、onchangeを発行する関数を呼び出す必要があります。

子供のための例：

親で今

@Output onchange: EventEmitter<Boolean> = new EventEmitter(false); 
formInChild: FormGroup; 

constructor(private fb: FormBuilder) { 
    this.formInChild = fb.group(...) 
    this.formInChild.valueChanges.subscribe(() => { 
    this.onchange.emit(this.form.valid); 
    } 
} 

：

（ビュー）この場合

<child-comp (onchange)="setButtonState($event)"></child-comp> 
<button pButton type="button" label="Submit" 
      [disabled]="!allvalid"></button> 

（コンポーネント）

formInParent: FormGroup; 
allvalid: boolean = false; 

constructor(private fb: FormBuilder) { 
    this.formInParent = fb.group(...); 
} 

setButtonState(formFromChildValid) { 
    this.allvalid = this.formInParent.valid && formFromChildValid; 
} 

を変更するたびに子供のための何かm、子フォームの有効な状態がボタンに聞こえる変数allvalidを更新する親に送出されます。