仅在选中单选按钮时才需要输入字段-Angular 4

Question

I have a reactive form with 3 radio buttons and their corresponding inputs text (so 3 too). If i click on a radio button, i display just its corresponding inputs text. I want to make the input text required only if I click on its radio button. I use a custom validator in addition to required, so i can't use the html way.

My form is initialized like this in my component.ts :

initializeForm() {
    this.formGroupItemSelection = this.fb.group({
          radioBoutton:'refNumber',
          refNumberSelected:[
            null,
            Validators.compose([Validators.required, matchValuesRefNumber(this.listOfItems)])
          ],
          partNumberSelected:[
            null,
            Validators.compose([Validators.required, matchValuesPartNumber(this.listOfItems)])
          ],
          itemNameSelected: [
            null,
            Validators.compose([Validators.required, matchValuesItemName(this.listOfItems)])
          ]
    })
}

How can i make inputs text required dynamically and not at initialization ?

Validator.ts (example with matchValuesRefNumber ) :

export const matchValuesRefNumber = (valuesToCheck: any[]): ValidatorFn => {
  return (control: AbstractControl): { [key: string]: boolean } => {
    const controlValue = control.value;

    let res = valuesToCheck.findIndex(el => el.refNumber.input === controlValue);
    console.log(res);
    return res !== -1 ? null : { findmatch: true };
  };
};

component.html

<section class="CreateItem" *ngIf="formGroupItemSelection"> 
<form (ngSubmit)="addItem()" [formGroup]="formGroupItemSelection">

  <input formControlName="radioBoutton" type="radio" value="refNumber" checked> ref number
  <br>

  <input formControlName="radioBoutton" type="radio" value="partNumber"> part number
  <br>

  <input formControlName="radioBoutton" type="radio" value="itemName"> item name
  <br/>
  <br>

  <div *ngIf="formGroupItemSelection.controls.radioBoutton.value==='refNumber'">
    <input list="refNumbers" formControlName="refNumberSelected" type="text" name="refNumberSelected">
    <datalist id="refNumbers">
      <option *ngFor="let ref of listOfItems">{{ref.refNumber.input}}</option>
    </datalist>
  </div>

  <div *ngIf="formGroupItemSelection.controls.radioBoutton.value==='partNumber'">
    <input list="partNumbers" formControlName="partNumberSelected" type="text" name="partNumberSelected">
    <datalist id="partNumbers">
      <option *ngFor="let ref of listOfItems">{{ref.partNumber.input}}</option>
    </datalist>
  </div>

  <div *ngIf="formGroupItemSelection.controls.radioBoutton.value==='itemName'">
    <input list="itemsName" formControlName="itemNameSelected" type="text" name="itemNameSelected">
    <datalist id="itemsName">
      <option *ngFor="let ref of listOfItems">{{ref.itemDesignation.input}}</option>
    </datalist>
  </div>

  <button type="submit" [disabled]="!formGroupItemSelection.valid">Valider</button>


</form>
</section>

Answer 1

I had something similar:

Here I only wanted the Phone to be a required field if the Send Notifications radio button was set to text . If it was set to email , the phone was not required.

My code looks like this:

In the ngOnInit right after I build the form:

    this.customerForm.get('notification').valueChanges
                     .subscribe(value => this.setNotification(value));

And later in the same file:

setNotification(notifyVia: string): void {
    const phoneControl = this.customerForm.get('phone');
    if (notifyVia === 'text') {
        phoneControl.setValidators(Validators.required);
    } else {
        phoneControl.clearValidators();
    }
    phoneControl.updateValueAndValidity();
}

You can find the complete source code here: https://github.com/DeborahK/Angular2-ReactiveForms/tree/master/Demo-Final-Updated