如何将表单作为Angular 分量输入传递

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

我遇到了一个问题，组件中的字段没有添加到我的表单中.如何从组件中将输入与表单相关联？请参见下面的演示链接.

100

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

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

具有窗体的主体组件

<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>

百人组

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>