时间戳

首页 > 解决方案 > 从组件更改模型时未调用 ngModelChange

angular - 从组件更改模型时未调用 ngModelChange

问题描述

我是 Angular 的新手，我正在尝试了解如何连接不同的控制器，以便在控制器更改时更改控制器的值。

在这种特殊情况下，我有一个带有 ngModel 的表单，并尝试使用 ngModelChange 更新模型中其他属性的值，问题是当用户与控件交互时调用 ngModelChange，但在更新模型时不调用从组件。

让我向您展示一个示例代码。

https://stackblitz.com/edit/angular-ivy-z2q4mr

HTML 模板：

<form #f="ngForm" (ngSubmit)="onSubmit(f)">
  <mat-form-field appearance="fill">
    <mat-label>Field 1</mat-label>
    <input matInput name="field1" [(ngModel)]="MyItem.field1" (ngModelChange)="changeField2($event)">
  </mat-form-field>

  <mat-form-field appearance="fill">
    <mat-label>Field 2</mat-label>
    <input matInput disabled name="field2" [(ngModel)]="MyItem.field2" (ngModelChange)="changeField3($event)">
  </mat-form-field>
  
  <mat-form-field appearance="fill">
    <mat-label>Field 3</mat-label>
    <input matInput disabled name="field3" [(ngModel)]="MyItem.field3">
  </mat-form-field>
</form>

零件

import { OnInit, Component, ViewChild } from '@angular/core';


@Component({
  selector: 'app-component1',
  templateUrl: './component1.component.html',
  styleUrls: ['./component1.component.css']
})
export class Component1Component implements OnInit  {
  MyItem : any = {}

    constructor() {
      }
      
    ngOnInit(): void {
    }
    
    changeField2(event: any){
        this.MyItem.field2 = this.MyItem.field1 + " modification field 2"; //We can see that everytime field1 is changed is updating field2
    }
    
    changeField3(event: any) {
        this.MyItem.field3 = this.MyItem.field2 + " modification field 3"; //Eventhough we are updating field2, this is not being called
    }
}

如果我更改了 field1（因为它与 field2 相关），我希望 field3 会自动更新。当然我也考虑过调用changeField3on changeField2，但是如果我有一个有很多控制器的表单，那就太混乱了，可以从不同的方法调用相同的操作。

标签： angulartypescriptangular-material

解决方案

Field3不会更新，因为您没有在Field2.

(ngModelChange) 是 ngModel 指令的 @Output。它在模型更改时触发。

为了使您的示例正常工作，您必须在第一个字段更改时将第三个字段与第二个字段一起更改

  changeField2(event: any) {
    this.MyItem.field2 = this.MyItem.field1 + ' modification field 2'; 
    this.MyItem.field3 = this.MyItem.field2 + ' modification field 3';
  }

实现您想要的另一种方法是使用ReactiveForms Playground

推荐阅读