Angular 从表单控件验证中删除 Validators.min

Question

我有一个包含 2 个字段的表单：

includeValidation，一个 select 下拉列表（2 个选项）：带验证，不带验证
金额，输入数字字段

根据第一个下拉列表，我在第二个字段上有验证器：Validators.required、Validators.min(0.1).

我正在尝试使用 clearValidators() 来删除验证，但它只删除了必需的，但没有删除 min(0.1)

当 includeValidation == "without validation" 时如何删除 min(0.1)

formtest.ts

  ngOnInit(): void {
    this.initForm();
    this.initValueChanges();
  }

  initForm(): void {
    this.addForm = this.formBuilder.group({
      includeValidation: [''],
      amount: [0, [Validators.required, Validators.min(0.1)]]
    });
  }

  initValueChanges() {
    this.addForm.get('includeValidation').valueChanges.subscribe((value) => {
      if(value === 'with validation') {
        this.addForm.get('amount').setValidators([Validators.required, Validators.min(0.1)]);
        
      } else if(value === 'without validation') {
        this.addForm.get('amount').setValue(0);
        this.addForm.get('amount').clearValidators();
      }
    });
  }
  
    previewSaveButton() {
        this.addForm.get('amount').updateValueAndValidity();

        if(this.addForm.valid) {
        
        }
    }

formtest.html

  <form novalidate role="form" name="addForm" [formGroup]="addForm">
    <div class="row">
      <div class="col-md-12">
        <h5>General</h5>
        <div class="form-group"><label>include Validation</label>
          <select name="includeValidation" class="form-control" formControlName="includeValidation">
            <option></option>
            <option value="with validation">with validation</option>
            <option value="without validation">without validation</option>
          </select>
        </div>
        <div class="form-group"><label>amount</label>
          <input name="amount" type="text" class="form-control" formControlName="amount">
        </div>
      </div>
    </div>
    <hr />
    <div>
      <div class="d-flex justify-content-end">
        <button type="submit" (click)="previewSaveButton()">Next</button>
      </div>
    </div>
  </form>

Answer 1

无论何时在运行时添加或删除验证器，都必须显式调用 updateValueAndValidity()。

来自docs：

When you add or remove a validator at run time, you must call updateValueAndValidity() for the new validation to take effect.

试试这个：

initValueChanges() {
    this.addForm.get('includeValidation').valueChanges.subscribe((value) => {
      if(value === 'with validation') {
        this.addForm.get('amount').setValidators([Validators.required, Validators.min(0.1)]);
        
      } else if(value === 'without validation') {
        this.addForm.get('amount').setValue(0);
        this.addForm.get('amount').clearValidators();
      }
      this.addForm.get('amount').updateValueAndValidity();  // <-- added this line
    });
  }

Angular 从表单控件验证中删除 Validators.min

Angular removing Validators.min from form control validation

angular

angular-forms

angular-reactive-forms

angular2-form-validation