Angular 角度6中的嵌套组件

我有一个组件a（子组件），我想显示在组件B（父组件）下。 “A”部分

组件“B”的Html页面

现在，当我在父组件的文本框中输入任何内容时，它在From值中可见，但如果我选择子组件的下拉列表，则表单值不会更新。即使我已经花了2个小时，但我无法找到我的错误。

---

要同步嵌套表单组件的值，需要设置

formGroupName

参数：

---

您应该在

父组件中使用相同的
表单组
，以及
子组件。您可以将父级
formGroup
作为输入传递给子组件

在此之前，在子组件中创建
@Input（）
属性

A部分

<div [formGroup]="dbForm">
    <div class="form-group">
      <label class="form-label" for="dbServerID">Exposure Server</label>
      <div>
        <select formControlName="dbServer" class="form-control custom-select" id="dbServerId">
          <option *ngFor="let ds of databaseServers" [ngValue]="ds">
            {{ds.databaseServerName}}
          </option>
        </select>   
      </div>
    </div>
  </div>

export class DatabaseServerComponent implements OnInit {
  @Input() dbForm : FormGroup;

  constructor(private fb: FormBuilder) {
    this.createForm();
  }
  createForm() {
   // Simply add child control to the form. No need to create form again
   this.dbForm.addControl('dbServer', new FormControl('', Validators.required));
  }

现在将父窗体
newPfForm
作为输入传递给子窗体，以便它们共享相同的
窗体组

模板B（父级）



组件A的模板将保持原样。没有变化
 如果您在stackbitz.com中共享您的代码，这将很容易提供帮助。您还需要在组件A中具有formGroup指令的div下添加新的表单控件。在上面的继续部分中，组件A的html看起来像……您的表单控件html，否则您将得到错误：formControlName必须与父formGroup一起使用directive@AvijOP的子组件（组件A）已经具有与您在这里提到的相同的结构。只查看了您的答案。您可以尝试此
this.dbForm.addControl（'dbServer'，new FormControl（''，Validators.required））更新了答案。你能给我指一个实例吗，因为我已经跟随了链接，但我无法使它在我的情况下工作？
<form [formGroup]="newPfForm">
  <div class="form-group">
    <label class="form-label">Name</label>
    <input class="form-control" type="text" formControlName="name" />
  </div>
  <div>
    <app-database-server ></app-database-server>
  </div>
</form>
<p>Form value: {{ newPfForm.value | json }}</p>

@Component({
  selector: 'app-new-portfolio',
  templateUrl: './new-portfolio.component.html',
  styleUrls: ['./new-portfolio.component.css']
})
export class NewPortfolioComponent implements OnInit {
  newPfForm: FormGroup;

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
    this.newPfForm = this.fb.group({
        name: ['', [Validators.required, Validators.maxLength(10)]],
        dbForm: this.fb.group({
          dbServer: ['', Validators.required],
        })
    });
}

export class DatabaseServerComponent implements OnInit {
  @Input() dbForm : FormGroup;

  constructor(private fb: FormBuilder) {
    this.createForm();
  }
  createForm() {
   // Simply add child control to the form. No need to create form again
   this.dbForm.addControl('dbServer', new FormControl('', Validators.required));
  }

<div>
    <app-database-server [dbForm]="newPfForm"></app-database-server>
</div>