Angular响应式表单：如何正确用dirty状态限制密码同时更新？

你的判断条件不生效主要有3个核心问题：

1. 错误获取控件状态：xyzGroup.value.WifiPassword拿到的是控件的值，不是FormControl实例，自然没有dirty属性——dirty是FormControl对象的状态属性，得通过表单组的get()方法获取控件实例才能访问。
2. 混用响应式表单与ngModel：响应式表单不需要[(ngModel)]，双向绑定会干扰表单状态的跟踪，导致dirty等状态判断失效。
3. 变量名错误：代码里写了this.wlanSettingsGroup，但你的表单组实际叫xyzGroup，这会直接导致报错。

另外还有两个小问题：

• HTML里的<form [formGroup]="xyzGroup>少了闭合引号，应该是[formGroup]="xyzGroup"
• 第二个密码输入框的type="password2"是错的，应该是type="password"

修正后的代码 #

form.component.html

<form [formGroup]="xyzGroup">
  <div class="form-group row">
    <label for="password1" class="col-sm-3">Password1:</label>
    <div class="mx-sm-2 text-center">
      <input type="password" class="form-control-sm" 
             formControlName="WifiPassword" id="password1">
    </div>
  </div>
  <div class="form-group row">
    <label for="password2" class="col-sm-3">Password2:</label>
    <div class="mx-sm-2 text-center">
      <input type="password" class="form-control-sm" 
             formControlName="WifiPassword2" id="password2">
    </div>
  </div>
  <button (click)="onAlert()">Submit</button>
</form>

form.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
  xyzGroup!: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.setFormGroup();
  }

  setFormGroup() {
    this.xyzGroup = this.fb.group({
      WifiPassword: "",
      WifiPassword2: "" 
    });
  }

  onAlert(){
    // 获取两个密码控件的实例
    const passwordCtrl = this.xyzGroup.get('WifiPassword');
    const password2Ctrl = this.xyzGroup.get('WifiPassword2');

    // 判断两个控件是否都被修改过
    if (passwordCtrl?.dirty && password2Ctrl?.dirty) {
      alert("请逐个更新密码");
    } else {
      // 执行提交逻辑
      console.log('提交表单', this.xyzGroup.value);
    }
  }
}

关键修改说明 #

• 移除了所有[(ngModel)]，完全用响应式表单管理控件状态和值
• 通过this.xyzGroup.get('控件名')获取FormControl实例，才能访问dirty状态
• 修正了表单组名称的拼写错误，统一用xyzGroup
• 修正了HTML里的语法错误（引号、input类型）
• 修正了ngOnInit的拼写（原代码写的是ngOninit，首字母小写会导致生命周期钩子不执行）

如果需要保留初始值，可以在构建表单时设置初始值，比如：

this.xyzGroup = this.fb.group({
  WifiPassword: [this.password1],
  WifiPassword2: [this.password2]
});

内容的提问来源于stack exchange，提问作者AbhinayaDuraipandi