Question

Angular版本：v4.2.x

我有一个包含子组件的表单：

parent.component.ts ：

@Component({
    template: `
        <form #myForm="ngForm">
          <child-component [parentForm]="myForm" [inputName]="'myName'"></child-component>
        </form>
     `
})
export class ParentComponent implements OnInit {
    @ViewChild("myForm") myForm: NgForm;
}

child.component.ts ：

@Component({
   template: `
      <input [name]="inputName" [(ngModel)]="petName"></input>
    `
})
export class ChildComponent implements OnInit {
   @Input("parentForm") parentForm: NgForm;
   @Input("inputName") inputName: string;
   petName: string;

   ngOnInit() {
      this.parentForm.valueChanges.subscribe(changes => {
           console.log(JSON.stringify(changes));
      });
   }
}

在输入子输入字段时，我看不到控制台中的任何更改。但是，如果我将相同的代码从子节点移动到父节点并删除子组件，则在键入时将在控制台中输出更改。

有什么想法吗？谢谢！

Answer 1

您可以尝试手动将ngModel指令添加到父NgForm：

<强> child.component.html

<input [name]="inputName" #model="ngModel" [(ngModel)]="petName">

<强> child.component.ts

export class ChildComponent implements OnInit {
  ...
  @ViewChild("model") ngModel: NgModel;

  ngOnInit() {
    this.parentForm.addControl(this.ngModel); // <== add this
    this.parentForm.valueChanges.subscribe(changes => {
      console.log(JSON.stringify(changes));
    });
  }
}

<强> Plunker Example

Angular2-form：是否可以将子输入包含到父NgForm值更改中？

1 个答案: