Question

我有一个要显示在组件B（父）下的组件A（子）。组件“ 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],
        })
    });
}

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

Answer 1

您应该在formGroup和parent组件中使用相同的child。您可以将父formGroup作为子组件的输入。

在此之前，请在子组件中创建@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的模板将保持不变。不用找了。

Answer 2

为了同步嵌套表单组件的值，您需要设置formGroupName参数：

https://angular.io/api/forms/FormGroupName

Angular 6中的嵌套组件

2 个答案: