forms - 根据角度 5 中的另一个字段值制作表单字段

Question

我有以下表格。我想强制使用图形类型。但是，仅当图形是条形图或折线图而不是饼图或圆环图时，才应强制使用 X 轴和 Y 轴值。根据我的代码，X 和 Y 轴值始终是强制性的。请帮忙。

html

    <form [formGroup]="clientForm" (ngSubmit)="clientForm.valid && changeGraph()" #formLogin="ngForm">

              <div class="form-group">
            <label> Graph Type </label>
            <select class="form-control" formControlName="type">
              <option disabled [ngValue]="null"> Select Option </option>
              <option *ngFor='let t of types' [ngValue]="t"> {{t}} </option>
            </select>
            <div class="form-err" *ngIf="(clientForm.controls['type'].hasError('required') && clientForm.controls['type'].touched) || (clientForm.controls['type'].hasError('required') && formLogin.submitted)"> Please enter Graph Type </div>
              </div>

              <div class="form-group">
            <label> X-Axis </label>
            <select class="form-control" formControlName="xAxis">
              <option disabled [ngValue]="null"> Select Option </option>
              <option *ngFor='let dim of dimensions?.data' [ngValue]="dim"> {{dim}} </option>
            </select>
            <div class="form-err" *ngIf="(clientForm.controls['xAxis'].hasError('required') && clientForm.controls['xAxis'].touched) || (clientForm.controls['xAxis'].hasError('required') && formLogin.submitted)"> Please enter Dimension </div>
              </div>

              <div class="form-group">
            <label> Y-Axis </label>
            <select class="form-control" formControlName="yAxis">
              <option disabled [ngValue]="null"> Select Option </option>
              <option *ngFor='let dim of dimensions?.data' [ngValue]="dim"> {{dim}} </option>
            </select>
            <div class="form-err" *ngIf="(clientForm.controls['yAxis'].hasError('required') && clientForm.controls['yAxis'].touched) || (clientForm.controls['yAxis'].hasError('required') && formLogin.submitted)"> Please enter Measure </div>
              </div>

              <button class="client-side-window-btn" type="submit">
            Save
              </button>

     </form>

ts

    import { Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
    import { FormGroup, FormBuilder, Validators, FormControl, FormsModule } from '@angular/forms';

    @Component({
      selector: 'app-client',
      templateUrl: './client.component.html',
      styleUrls: ['./client.component.css']
    })
    export class ClientComponent implements OnInit {

      //Form params
      clientForm: FormGroup;
      type:FormControl;
      xAxis:FormControl;
      yAxis:FormControl;


      //dropdown arrays
      public dimensions:string[]= ['Plant','Year','Month'];

      public types: string[]= ['bar','line','pie','doughnut'];

        constructor(
          private form:FormBuilder,
          private forms:FormsModule) {
     }

        ngOnInit() {
          this.clientForm = this.form.group({
           'type': [null, Validators.required],
           'xAxis': [null, Validators.required],
           'yAxis': [null, Validators.required],
         });
      }
    }

Answer 1

与 (change)="callback()"你可以触发一个函数。
然后用 formControl.setValidators()您可以设置验证器。

编辑

您还需要 formControl.updateValueAndValidity()实际触发验证。

StackBlits Here

请注意，您无法读取当前的验证器(实际上这是可能的，但有点棘手)，而只能覆盖它们。

html

            <select (change)="updateAxisFields()" class="form-control" formControlName="type">
              <option disabled [ngValue]="null"> Select Option </option>
              <option *ngFor='let t of types' [ngValue]="t"> {{t}} </option>
            </select>

ts

    @Component({
      selector: 'app-client',
      templateUrl: './client.component.html',
      styleUrls: ['./client.component.css']
    })
    export class ClientComponent implements OnInit {

      //Form params
      optional: string[] = ['pie', 'doughnut'];
      clientForm: FormGroup;
      type:FormControl;
      xAxis:FormControl;
      yAxis:FormControl;


      //dropdown arrays
      public dimensions:string[]= ['Plant','Year','Month'];

      public types: string[]= ['bar','line','pie','doughnut'];

        constructor(
          private form:FormBuilder,
          private forms:FormsModule) {
     }

        ngOnInit() {
          this.clientForm = this.form.group({
           'type': [null, Validators.required],
           'xAxis': [null, Validators.required],
           'yAxis': [null, Validators.required],
         });
      }

   updateAxisFields(): void {
        console.info("updateAxis");
        const type = this.clientForm.controls.type.value;

        const xAxis = this.clientForm.controls.xAxis;
        const yAxis = this.clientForm.controls.yAxis;
        const newValidators = [];
        this.axisRequired = this.optional.indexOf(type) > -1
        if (this.axisRequired) {
          newValidators.push(Validators.required);
        }
        xAxis.setValidators(newValidators);
        xAxis.updateValueAndValidity();
        yAxis.setValidators(newValidators);
        yAxis.updateValueAndValidity();
     }
}