Ionic 2 Angular 2中FormGroup.patchValue动态添加验证器失效求助

我完全理解你的困扰——你想在选择Double（值为2）时，给第二个所有者的FirstName2和LastName2字段动态添加必填验证，但之前用patchValue的方法根本行不通，因为patchValue是用来更新表单值的，不是用来修改验证规则的！

问题根源 #

你之前的代码错误地用patchValue尝试设置验证器，这完全偏离了它的作用。表单控件的验证器需要通过控件自身的方法来修改，而不是通过更新值的方式。

正确实现方案 #

我们可以通过监听Ownership选项的变化，动态给目标字段添加/移除必填验证，并且确保验证状态实时更新：

1. 监听Ownership的选择变化

在组件的初始化生命周期钩子中，监听Ownership控件的值变化，根据选择结果切换验证规则：

import { OnInit } from '@angular/core';
// ... 其他导入

export class YourComponent implements OnInit {
  sellerData: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    // 初始化你的表单（和你原来的代码一致）
    this.sellerData = this.formBuilder.group({
      Ownership: ['', Validators.required],
      FirstName: ['', Validators.required],
      LastName: ['', Validators.required],
      FirstName2: [''],
      LastName2: [''],
    });
  }

  ngOnInit() {
    // 监听Ownership的选择变化
    this.sellerData.get('Ownership').valueChanges.subscribe(selectedValue => {
      // 根据选择的值判断是否需要添加验证（注意值的类型：如果是字符串就用'2'，数字就用2）
      const needSecondOwnerValidators = selectedValue === '2';
      this.toggleSecondOwnerValidators(needSecondOwnerValidators);
    });
  }
}

2. 编写切换验证器的方法

这个方法负责给目标字段添加/移除必填验证，并强制更新表单状态，让验证立即生效：

toggleSecondOwnerValidators(isRequired: boolean) {
  // 获取对应的表单控件
  const firstName2Ctrl = this.sellerData.get('FirstName2');
  const lastName2Ctrl = this.sellerData.get('LastName2');

  if (isRequired) {
    // 添加必填验证
    firstName2Ctrl.setValidators(Validators.required);
    lastName2Ctrl.setValidators(Validators.required);
  } else {
    // 移除所有验证器
    firstName2Ctrl.clearValidators();
    lastName2Ctrl.clearValidators();
  }

  // 更新控件的验证状态（emitEvent: false避免触发不必要的valueChanges循环）
  firstName2Ctrl.updateValueAndValidity({ emitEvent: false });
  lastName2Ctrl.updateValueAndValidity({ emitEvent: false });
}

3. 优化模板（可选）

你原来的keyup事件其实可以去掉了，因为当我们设置完验证器并更新状态后，Angular的表单会自动监听输入变化触发验证。如果还是想手动触发，可以保留keyup但修改为：

<ion-input 
  (keyup)="sellerData.get('FirstName2').updateValueAndValidity()" 
  formControlName="FirstName2" 
  placeholder="First name(2nd Owner) *"
></ion-input>

额外提醒 #

• 注意Ownership的值类型：如果你的ion-option的value是字符串（比如<ion-option value="2">Double</ion-option>），判断时要用selectedValue === '2'；如果是数字类型，就用selectedValue === 2。
• updateValueAndValidity()方法是关键，设置完验证器后必须调用它，否则表单不会立即更新验证状态。

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