根据角度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();
     }
}