时间戳

首页 > 解决方案 > Angular 模板驱动形式：重置值和状态（原始、脏、触摸、无效）

html - Angular 模板驱动形式：重置值和状态（原始、脏、触摸、无效）

问题描述

在我的模板驱动表单中，里面有很多组和字段。我可以成功重置特定 ngModelGroup 的字段/模型值，但自定义组件的状态 [invalid、touched、dirty] 没有改变。这是代码：

1）HTML

<div ngModelGroup="personGroup" #personGroup="ngModelGroup">
    <app-input-text name="name" [(ngModel)]="name" label="Your Name" required></app-input-text>

    <app-input-text name="age" [(ngModel)]="age" label="Your Age" required></app-input-text>

    <div class="example-container">
        <mat-form-field appearance="fill">
            <mat-label>Country</mat-label>
            <input matInput name="country" placeholder="Your Country" [(ngModel)]="country" required>
        </mat-form-field>
    </div>
</div>
<button (click)="reset()">Reset</button>

2) 技术支持

export class AppComponent {
  name: string;
  age: number;
  country: string;

  @ViewChild("personForm")
  private personForm: NgForm;

  reset() {
    this.personForm.controls['personGroup'].reset();

  }
}

当我单击“重置”时，值被清除但组件状态不会改变。

app-input-text 实现了 ControlValueAccessor 并且似乎没问题，除了这种行为。

如何重置值和自定义组件状态？

这是 StackBliz：https ://stackblitz.com/edit/angular-ivy-g2r9g5

提前致谢！

标签： htmlangulartypescript

解决方案

推荐阅读