How to make certain input fields required only when their corresponding radio button is chosen

Question

I am working on a project where there is a form with radio buttons. I need to make certain input fields required only when their corresponding radio button is chosen

I need to how to check the radio button and accordingly make the number input fields required. tried many ways and kinds if *ngIf but I can not get the right form

thanks in advance see here

<form (ngSubmit)="onSumbit(f)" id="form" #f="ngForm">
  <!-- <form method="POST" action="#"> -->
  <h5>Filter für Rechnungsgröße
    <fa-icon class="icn" [icon]="faQuestionCircle" placement="right" ngbTooltip="choosing the upper limit to Be zero means it is unlimited, also form zero to zero is denied"></fa-icon>
  </h5>
  <div>
    <div>
      <input type="radio" name="unlimtedRange" id="unlimtedRange" required>
      <label class="form-control-label" for="choiceUnlimted">unlimitiert</label>
    </div>
    <div>
      <input type="radio" name="unlimtedRange" id="limtedRange" required>
      <label class="form-control-label" for="choiceLimted">limitiert</label>
      <div class="reveal-if-active">
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text">von</span>
            <span class="input-group-text">€</span>
          </div>
          <input type="number" class="form-control" name="from" id="from" [(ngModel)]="fromVal" #from="ngModel" ngModel>
        </div>
        <div class="input-group">
          <input type="number" class="form-control" name="to" id="to" [(ngModel)]="toVal" #to="ngModel" ngModel>
          <div class="input-group-append">
            <span class="input-group-text">€</span>
            <span class="input-group-text">bis</span>
          </div>
        </div>
        <span class="help-block" *ngIf="to.value < from.value && to.value !== 0">to field can not be smaller than from field !</span>
      </div>
    </div>
  </div>
  <div class="section">
    <h5>Anzeigedauer einer Forderung</h5>
    <div class="inp">
      <input type="number" name="remainTime" id="remainTime" class="form-control" placeholder="Maximum 90 days" title="Maximal 90 Tage" [(ngModel)]="remainTimeVal" [formControl]="myControl" ngModel required>

    </div>
    <div>
      <button type="submit" class="btn btn-success" role="button">Annehmen</button>
      <a href="/#" class="btn btn-light" role="button">Zurücksetzen</a>
      <span>
          <p id="demo">
          </p>
      </span>
    </div>
  </div>
</form>

Answer 1

Logic:

        this.form = new FormGroup({
        someRadio: new FormControl(),
        someInput1: new FormControl(),
        someInput2: new FormControl()
    });

    this.form.controls.someRadio.valueChanges.subscribe(val => {
        if (val === 1) {
            this.form.controls.someInput1.setValidators(Validators.required);
            this.form.controls.someInput2.clearValidators();
        }
        if (val === 2) {
            this.form.controls.someInput2.setValidators(Validators.required);
            this.form.controls.someInput1.clearValidators();
        }
        this.form.controls.someInput1.updateValueAndValidity();
        this.form.controls.someInput2.updateValueAndValidity();
    });

HTML:

<form [formGroup]="form">
<label>
    <input type="radio" name="someRadio" formControlName="someRadio" [value]="1"/>
    Some radio 1
</label>
<label>
    <input type="radio" name="someRadio" formControlName="someRadio" [value]="2"/>
    Some radio 2
</label>
<input type="text" name="someInput1" formControlName="someInput1" placeholder="some input 1">
<input type="text" name="someInput2" formControlName="someInput2" placeholder="some input 2">
<button type="submit" [disabled]="form.invalid">Submit</button>

Feel free to ask if something is not clear.