Question

我想对反应式表单进行两种方式的绑定。首先，我需要设置从@Input数据接收的值。

实际结果是，当我设置静态字符串时，它工作正常。

父组件HTML

<ng-template [ngSwitchCase]="'edit'">
          <app-edit class="flex-auto" (editItem)="disciplineAfterView($event)" [discipline] = "selectedItem"></app-edit>
      </ng-template>

子组件HTML

<form [formGroup]="disciplineForm">

      <app-input-multilang [title]="'Discipline'" [form]="disciplineForm" [en]="'discipline_en'" [de]="'discipline_de'">
      </app-input-multilang>

    </form>

子组件TS

 @Input() discipline: any;

this.disciplineForm.get('discipline_de').setValue("dd");  // Working fine

this.disciplineForm.get('discipline_en').setValue(this.discipline.name.en); // Not working

这里是@Input 学科对象的值

name: {en: "44", de: "44"}

Answer 1

尝试在ngOnChanges()内设置表单值

ngOnChanges(changes: SimpleChanges) {
  if(changes['discipline']) {
    this.disciplineForm.get('discipline_en').setValue(this.discipline.name.en);
  }
}

Answer 2

您可以为输入属性写一个setter ，并在设置值后写setValue。或者，您可以在ngOnChanges内编写setValue。

只要输入属性发生更改，就会调用

ngOnChanges。

例如ngOnChanges。

ngOnChanges(changes: SimpleChanges) {
  if (changes && changes.discipline && changes.discipline.currentValue) {
    this.disciplineForm.get('discipline_en').setValue(this.discipline.name.en);
  }
}

来自@Input的反应形式setValue

2 个答案: