如何将 ngForm 传递给子组件？

Question

我有一个自定义输入组件，我想以多种形式重复使用它。但是我怎样才能将父母的表单上下文传递给它呢？我已经设法通过传递FormGroup 实例和字段名称来使用响应式表单来做到这一点。我正在尝试使用模板驱动的表单来实现相同的目标，但到目前为止我还没有成功。这是我的代码：

<!-- parent.component.html -->
<form #form="ngForm" (ngSubmit)="console.log(JSON.stringify(f.value))">
  <input name="someField" ngModel />
  <app-child name="myField"></app-child>
  <button type="submit">Submit</button>
</form>

<!-- child.component.html -->
<input ngModel [name]="name" />

// child.component.ts
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
})
class ChildComponent {
  @Input() name: string;
}

绑定不正确，因为提交表单时f.value.myField没有定义，只有f.value.someField。我怎样才能做到这一点？

Answer 1

您可以使用ngModelGroup 指令，然后在您的子组件中提供它，如下所示，这是一个有效的stackblitz：

<form #form="ngForm" (ngSubmit)="console.log(JSON.stringify(f.value))">
  <input name="someField" ngModel />
  <app-child ngModelGroup="myField"></app-child> // here
  <button type="submit">Submit</button>
</form>

// child.component.ts
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
  viewProviders: [{provide: ControlContainer, useExisting: NgModelGroup}] // here
})
class ChildComponent {
  @Input() name: string;
}