如何将表单作为 Angular 组件输入传递？

Question

在 Angular 16 应用程序中，我有一个模板驱动的表单，它将直接包含一个文本字段和我的提交按钮。它还包含一个组件，其中包含一些常见的可重用表单字段，因此我将表单引用作为输入传递给它。

我遇到一个问题，组件内部的字段未添加到我的表单中。如何将输入与组件内的表单关联起来？请参阅下面的演示链接。

StackBlitz 演示在这里

问题是组件内的字段没有添加到表单中，因此当它们无效时，它们不会影响父表单。

这是我的问题中直接的代码，但上面的链接将是一个更好的例子

具有表单的主机组件

<form #myForm="ngForm" (ngSubmit)="submit(myForm)">
  <label for="fieldOne">One (directly in form)</label>
  <input
    type="text"
    id="fieldOne"
    name="fieldOne"
    [ngClass]="{
      'is-invalid': fieldOne.invalid && (fieldOne.touched || myForm.submitted)
    }"
    required
    #fieldOne="ngModel"
    [(ngModel)]="fieldOneVal"
  />

  <br /><br />

  <app-form-editor [form]="myForm"/>

  <br />
  <button type="submit">Submit</button>
  <strong *ngIf="submitSuccess" class="text-success">Sucessfully submitted!</strong>

  <br />

  <pre>myForm.valid: {{myForm.valid}}</pre>
  <pre>myForm.value: {{myForm.value | json}}</pre>
</form>

<app-form-editor>

import { Component, Input, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-form-editor',
  templateUrl: './form-editor.component.html',
})
export class FormEditorComponent implements OnInit {
  @Input() form!: NgForm;

  fieldTwoVal = '';

  ngOnInit(): void {}
}

<label for="fieldTwo" class="control-label">Two (Inside Component)</label>
<input
  name="fieldTwo"
  id="fieldTwo"
  [ngClass]="{
    'is-invalid': fieldTwo.invalid && (fieldTwo.touched || form.submitted)
  }"
  required
  [(ngModel)]="fieldTwoVal"
  #fieldTwo="ngModel"
/>

<br />
<pre>component form.valid: {{ form.valid }}</pre>
<pre>component form.value: {{ form.value | json }}</pre>

Answer 1

只需在您的应用程序表单编辑器中添加一个 viewProvider 即可。

@Component({
  selector: 'app-form-editor',
  templateUrl: './form-editor.component.html',
  viewProviders:[{ provide: ControlContainer, useExisting: NgForm }]
})

您可以认为在您的子组件中您需要添加一个“form ngForm”，但您选择不添加，否则使用现有的 注意：如果我们使用reactiveForms，要添加的viewProvider是

viewProviders:[{ provide: ControlContainer, useExisting: FormGroupDirective }]