Angular removing Validators.min from form control validation

Question

I have a form with 2 fields:

• includeValidation, a select dropdown (2 option): with validation, without validation
• amount, an input number field

depending on the first dropdown I have validators on the 2nd field: Validators.required, Validators.min(0.1).

Im trying to use clearValidators() to remove the validation but it only removes the required but not the min(0.1)

How do I remove the min(0.1) when includeValidation == "without validation"

code on stackblitz

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

You must explicitly call updateValueAndValidity() whenever you add or remove a validator at runtime.

From docs:

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

Try this:

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
    });
  }