来自@Input 的反应形式 setValue

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

Reactive forms setValue from @Input

angular

angular-reactive-forms