angular - Angular 6 中的嵌套组件

问题描述

我有一个组件 A（子），我想在组件 B（父）下显示它。组件“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>

控件“A”的打字稿页面

@Component({
  selector: 'app-database-server',
  templateUrl: './database-server.component.html',
  styleUrls: ['./database-server.component.css']
})
export class DatabaseServerComponent implements OnInit {
  dbForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.createForm();
  }
  createForm() {
    this.dbForm = this.fb.group({
      dbServer: ['', Validators.required ]
    });
  }

组件“B”的HTML页面

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

组件“B”的打字稿

@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],
        })
    });
}

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

标签： angular

您应该在组件中使用相同的formGroup组件。您可以将父组件作为输入传递给子组件。parentchildformGroup

在此之前在子组件中创建@Input()属性

A组份

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作为输入传递给子表单，以便它们共享相同的form group

模板 B（父）

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

组件 A 的模板将保持原样。没变。

angular - Angular 6 中的嵌套组件

问题描述

解决方案

推荐阅读