主页 / coding / 问题 / 79162194
Accepted
davood beheshti
Asked: 2024-11-06 18:30:52 +0800 CST

删除角度反应形式中不起作用的验证器

  • 772

我有一个条件，如果为真，我想向某些表单添加一系列验证，当条件不为真时，它将删除验证器。

现在，当我添加验证器时，它可以正常工作，但是当我尝试删除它时，它无法正确删除！

//html

<div [formGroup]="form">
    <p-checkbox (onChange)="changeShouldEnter()" name="shouldEnter" [value]="true"
          formControlName="shouldEnter"></p-checkbox>
    <label class="radio-lable mx-2">text</label>
</div>

//打字稿

  ngOnInit(): void {    
    this.form = new FormGroup({
      shouldEnter: new FormControl([]),
      storeCategoryId: new FormControl(),
      storeCategoryItemCode: new FormControl(),
    })
  }


  changeShouldEnter() {
    if (this.form.get('shouldEnter').value[0]) {
      this.form.get("storeCategoryId").addValidators(Validators.required)
      this.form.get("storeCategoryItemCode").addValidators(Validators.required)
    } else {
      this.form.get("storeCategoryId").removeValidators(Validators.required)
      this.form.get("storeCategoryItemCode").removeValidators(Validators.required)
    }
    this.cdr.detectChanges();
  }

我甚至尝试过这种方法，但最后，当我记录表单时，它仍然无效，并且在该表单的控件内部，它require: true再次显示。

.removeValidators([Validators.required])
//or
.addValidators([])
angular

1 个回答

  1. Best Answer

    当您添加或删除验证器时，请确保调用updateValueAndValidity，以反映更改。

    来自文档：

    重新计算控件的值和验证状态。

    默认情况下，它还会更新其祖先的值和有效性。

      changeShouldEnter() {
    const shouldEnterCtrl = this.form.get('shouldEnter');
    const storeCategoryIdCtrl = this.form.get('storeCategoryId');
    const storeCategoryItemCodeCtrl = this.form.get('storeCategoryItemCode');
    if (shouldEnterCtrl?.value?.[0]) {
      storeCategoryIdCtrl.addValidators(Validators.required)
      storeCategoryItemCodeCtrl.addValidators(Validators.required)
    } else {
      storeCategoryIdCtrl.removeValidators(Validators.required)
      storeCategoryItemCodeCtrl.removeValidators(Validators.required)
    }
    storeCategoryIdCtrl.updateValueAndValidity(); // <- changed here!
    storeCategoryItemCodeCtrl.updateValueAndValidity(); // <- changed here!
  }
    • 1

相关问题