Reactive form: How can I disable the default validation for the required attribute of an input element?

I have an Angular Material form with a select box and two text fields.
Each text field switches its visibility according to the select box’s value.
(If “TYPE1” is selected, “Type1 value” will be shown, if “TYPE2” is selected, “Type2 value” will be shown.)

enter image description here

I only want to check the displayed text field is not empty, but I don’t want to check another one.

To do so, I made a custom validator like this and apply it to the FormGroup object:

checkValidity(control: FormControl): { invalid: boolean } | null {
  const _type = control.get('type')?.value;
  if(_type === '' ){
    return { invalid: true };
  }
  if (_type === 'TYPE1' && control.get('type1_value').value == '') {
    return { invalid: true };
  } 
  else if ( _type === 'TYPE2' && control.get('type2_value').value == '') {
    return { invalid: true };
  }
  return null;
}

This works.
However, when I set the required attribute to each text field for a visual reason, Angular’s default validator checks both input fields even one of them is not displayed. This will result in an unwanted error.

How can I disable this behavior?
If there is no method to resolve this, and if I have to remove the required attribute from the input fields, is there a good visual way to teach users that the text fields are required?

You can see all of my code here. Thanks.

Answer

As you have used Reactive Form so there is no way to handle required conditionally from the template side. That benefit comes into template-driven form only. The only way I can see to fix this issue is :

<mat-form-field>
     <mat-label>
        Type1 value <ng-container> * </ng-container>
     </mat-label>
     <input matInput formControlName="type1_value">
</mat-form-field>

You may need to remove the required attribute from the matInput and add (*) using ng-container