angular - 如何使某些输入字段仅在选择相应的单选按钮时才需要

Question

我正在做一个项目，其中有一个带有单选按钮的表单。我需要仅在选择相应的单选按钮时才需要某些输入字段

我需要如何检查单选按钮并相应地设置所需的数字输入字段。如果 *ngIf 尝试了很多方法和种类，但我无法获得正确的形式

提前谢谢 看这里

<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">€&lt;/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">€&lt;/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

逻辑：

        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>

如果有不清楚的地方，请随时询问。

Answer 2

//Heare is sample code to add or remove validation on checkbox checked or unchecked

    ngOnInit() {
        this.testForm.get('checkbox').valueChanges
                             .subscribe(value => this.setValidator(value));
      }

    setValidator(checked: boolean): void {
        const textbox = this.testForm.get('textboxControlName');
        if (checked === true) {
          textbox.setValidators(Validators.required);
        } else {
          textbox.clearValidators();
        }
        textbox.updateValueAndValidity();
      }