親から子へのデータの受け渡し（入れ子になったフォーム）

Question

私はフォームを保持し、送信ボタンを持つ親コンポーネントを持つ入れ子になったフォームを作成しています。フォーム自体である子コンポーネントがあります。私はプロパティsubmittedがtrueなったフォームを送信すると

は、私が提出されたときにsubmittedは今trueである私の子コンポーネントに通知する必要があります。

これは、親コンポーネントにボタンを提出からのコードです：

 enviarDados(model: dadosAcordo, isValid: boolean, isJuridica:boolean) { 
     this.servError = ""; 
     this.submitted = true; 
     //more code 
     } 

そして、これは、子コンポーネントは、これまでどのように見えるかです：

export class TitularComponent implements OnChanges { 
    @Input('group') // this is the input for the form 
    @Input('submitted') // input for the status of submit 
    public titularForm: FormGroup; 
    @Output() modelChanged = new EventEmitter(); 


    constructor(private _fb: FormBuilder, private finalizaAcordo:FinalizaNegociacaoService) {} 

    ngOnChanges(){ 

    } 
// more code 

これは、親コンポーネントのhtmlです。

<div class="wrap-acordo"> 
    <form [formGroup]="formDadosBancarios" novalidate class="" (ngSubmit)="enviarDados(formDadosBancarios.value)"> 
     <div formArrayName="dados_titular"> 
     <div *ngFor="let dados_titular of formDadosBancarios.controls.dados_titular.controls; let i=index"> 
      <div [formGroupName]="i"> 
      <div class="col s12" *ngIf="formDadosBancarios.controls.dados_titular.length > 1"> 
       <span class="span-removeTitular right-align" (click)="removeTitular(i)"> Remover {{i+1}}º Titular </span> 
      </div> 
      <titular (modelChanged)="recebeValidators($event)" [group]="formDadosBancarios.controls.dados_titular.controls[i]"></titular> 
      </div> 
     </div> 
     </div> 
     <div class="col s12 m6"> 
     <input type="submit" class="botao-medio btn-aceita" value="Aceitar"> 
     </div> 
     <div class="col s12 m6"> 
     <input type="button" class="botao-medio btn-recusa" value="Recusar"> 
     </div> 
    </div> 
    </form> 
</div> 

誰かが私を助けることができますか？ありがとう:)

Answer 1

親コンポーネントでは、ボタンをクリックすると、this.formsubmitted = trueを設定します。子のcmponentでは、@Inputを使用してこのフォームを入力として送信します。 formsubmittedが真になったら何かをdpする必要がある場合は、入力formsubmittedにngonchangesを使用します。 Ngonchanges（変化：Simplechange）{ 場合（変更[ '提出'] & &変更[ '提出']電流値。）{ ここにあなたのものを行う } }

あなたはhttps://angular.io/docs/ts/latest/api/core/index/OnChanges-class.html