How to add a conditional validator for reactive forms in Angular 9

I assume you use Reactive Forms here. There's a chapter on Reactive Forms in the Angular documentation. It's an easier way to manage forms.

To get the selected value, you can use selectionChange.

<mat-form-field appearance="outline" (selectedChange)="onSelectionChange($event)" formControlName="accessType">
    <mat-label>Access Type</mat-label>
    <mat-select formControlName="accessType">
        <mat-option>--</mat-option>
        <mat-option value="paid-out"> Paid out</mat-option>
        <mat-option value="free"> Free</mat-option>
    </mat-select>
</mat-form-field>

(Use formControlName if you have a FormGroup or [formControl] if you only have a FormControl).

When the selection changes, a method that I named onSelectionChange() is called.
$event contains the value you selected. You'll get a MatSelectChange object. To get the value you selected, use the value property.

onSelectionChange(event: MatSelectChange) {
  if (event.value === 'paid-out') {
     myForm.controls.accessType.setValidators(myValidators) 
     myForm.controls.accessType.updateValueAndValidity();
  }    
}

When the selected value is paid-out, validators will be set on the form control (here your Access Type form control), then the updateValueAndValidity() method will be called to update the form control in order to apply validators on it.

To remove validation, call clearValidators() method. You'll remove all the validators, so if you have one or multiple validators you don't want to remove, set them after and call updateValueAndValidity() method.

I solved it, I added an event emitted Material selectionChange. Then I added the validations:

• setValidators: Set a validator for a control,

• clearValidators: Remove the validator from the control,

• updateValueAndValidity: Update the value and validation status of the control.

And the result was this:

template

<mat-form-field appearance="outline">
    <mat-label>Access Type</mat-label>
    <mat-select formControlName="accessType" (selectionChange)="selectedAccessType($event)" >
        <mat-option>--</mat-option>
        <mat-option value="paid-out"> Paid out</mat-option>
        <mat-option value="free"> Free</mat-option>
    </mat-select>
    <mat-error *ngIf="form.get('accessType').errors?.required">
          This field is required
    </mat-error>
</mat-form-field>

ts

    form: FormGroup;

    constructor(private fb: FormBuilder)

    ngOnInit(): void {
        this.form = this.fb.group({
            accessType: [''],
        )}
    }

    selectedAccessType(event: MatSelectChange) {
        switch (event.value) {
            case 'paid-out':
                this.form.get('accessType').setValidators([Validators.required])
                this.form.get('accessType').updateValueAndValidity()
                break
            case 'free':
                this.form.get('accessType').clearValidators()
                this.form.get('accessType').updateValueAndValidity()
                break
            default:
                this.form.get('accessType').clearValidators()
                this.form.get('accessType').updateValueAndValidity()
        }
    }