Angular материал: как установить требуемый валидатор как дополнительный в реактивной форме - PullRequest
Новая
       42

Angular материал: как установить требуемый валидатор как дополнительный в реактивной форме

3 голосов
/ 10 января 2020

Как установить required валидатор как опционально реактивная форма. У меня есть два входа amount и volume. если пользователь выбирает переключатель amount, требуемая проверка должна быть удалена из входа volume. Если volume, требуемая проверка должна быть удалена из amount

приложения. html

  <form #recForm="ngForm" name="form" [formGroup]="form" (ngSubmit)="onSubmit()">
      <div>
        <div class="label">
          <mat-label>Charged by</mat-label>
        </div>
        <mat-radio-group (change)="onChargesType($event)">
          <mat-radio-button
            *ngFor="let charges of chargedBy; let i = index"
            [checked]="i === 0"
            [value]="charges"
            >{{ charges }}</mat-radio-button
          >
        </mat-radio-group>
      </div>

      <mat-form-field *ngIf="!isAmount">
        <input formControlName="volume" matInput placeholder="Volume" />
      </mat-form-field>
      <mat-form-field *ngIf="isAmount">
        <input formControlName="amount" matInput placeholder="Amount" />
      </mat-form-field>
  </form>

приложения.ts 

chargedBy: string[] = ['amount', 'volume'];

  ngOnInit() {
    this.isChargedByAmount = true;
    this.form = this.fb.group({
      volume: ['', []],
      amount: ['', []],
    });
  }

  onChargesType(event: MatRadioChange) {
    if (event.value === 'amount') {
      this.form.get('amount').setValidators(Validators.required);
      this.form.get('volume').clearValidators();
      this.isChargedByAmount = true;
    }

    if (event.value === 'volume') {
      this.form.get('volume').setValidators(Validators.required);
      this.form.get('amount').clearValidators();
      this.isChargedByAmount = false;
    }
  }

1 Ответ

5 голосов
/ 10 января 2020

Я думаю, это потому, что вы должны вызывать метод updateValueAndValidity() Когда вы добавляете или удаляете валидатор во время выполнения, вы должны вызвать updateValueAndValidity(), чтобы новая проверка вступила в силу.

Я нахожу это из официальный angular до c https://angular.io/api/forms/AbstractControl#clearValidators

...