javascript - 将数据从父级传递给子级(嵌套表单)

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.formsubscribed = true 。并在子组件中使用 @Input 设置此表单作为输入提交。如果您需要在表单提交变为 true 后进行 dp 操作，请对输入表单提交使用 ngonchanges。Ngonchanges(更改:Simplechange){if(更改['已提交']&& 更改['已提交'].currentvalue){在这里做你的事情}}

您可以引用https://angular.io/docs/ts/latest/api/core/index/OnChanges-class.html