Angular-如何根據可見的div元素進行驗證

在我的 Angular-13 中，我想使用 ng-select 下拉選單顯示/隱藏 div 元素。我有這個代碼：

列舉

export const CHARGE_REQUIRED_DATA = [
  {
    'key': 0,
    'value': 'False'
  },
  {
    'key': 1,
    'value': 'True'
  }
]

export const CHARGE_MODE_DATA = [
  {
    'key': 1,
    'value': 'Fixed'
  },
  {
    'key': 2,
    'value': 'Percentage'
  }
]

然后在組件中，我有以下代碼：

組件.ts

import { CHARGE_MODE_DATA } from 'src/app/core/enum/chargemode';
import { CHARGE_REQUIRED_DATA } from 'src/app/core/enum/chargerequired';

export class TransCreateComponent implements OnInit {

  createTransForm!: FormGroup;
  selectedChargeRequired:any;
  selectedChargeMode:any;

  constructor(
    private fb: FormBuilder,
    ) { }

  ngOnInit(): void {
    this.createTrans();
    this.chargeRequiredData = CHARGE_REQUIRED_DATA;
    this.chargeModeData = CHARGE_MODE_DATA;
  }

  createTrans() {
    this.createTransForm = this.fb.group({
      ChargeRequired: ['', [Validators.required]],
      ChargeMode: [''],
      ChargePercent: ['', RxwebValidators.numeric({allowDecimal:true,isFormat:true})],
      ChargeValue: ['', RxwebValidators.numeric({allowDecimal:true,isFormat:true})],
    });
  }

組件.html：

  <div >
    <div >
      <label for="ChargeRequired">Charges Required<span style="color:red;">*</span></label>
      <ng-select [items]="chargeRequiredData"
        [selectOnTab]="true"
        [searchable]="true"
        bindValue="key"
        bindLabel="value"
        placeholder="Select Charge Required"
        [multiple]="false"
        [clearable]="true"
        [(ngModel)]="selectedChargeRequired"
        formControlName="ChargeRequired">
      </ng-select>
      <div *ngIf="fc['ChargeRequired'].touched && fc['ChargeRequired'].invalid" >
        <div *ngIf="fc['ChargeRequired'].errors && fc['ChargeRequired'].errors['required']">The field is required!</div>
      </div>
    </div>
  </div>

  <ng-container *ngIf="selectedChargeRequired == '1'">
    <div >
      <div >
        <label for="ChargeRequired">Charge Mode</label>
        <ng-select [items]="chargeModeData"
          [selectOnTab]="true"
          [searchable]="true"
          bindValue="key"
          bindLabel="value"
          placeholder="Select Charge Required"
          [multiple]="false"
          [clearable]="true"
          [(ngModel)]="selectedChargeMode"
          formControlName="ChargeMode">
        </ng-select>
      </div>
    </div>
  </ng-container>

  <ng-container *ngIf="selectedChargeMode == '2'">
    <div >
      <div >
        <label for="ChargePercent">Charge Percent</label>
        <input type="text" formControlName="ChargePercent"  id="ChargePercent" placeholder="Enter Charge Percent">
      </div>
    </div>
  </ng-container>
  <ng-container *ngIf="selectedChargeMode == '1'">
    <div >
      <div >
        <label for="ChargeValue">Charge Value</label>
        <input type="text" formControlName="ChargeValue"  id="ChargeValue" placeholder="Enter Charge Value">
      </div>
    </div>
  </ng-container>

我正在使用 ng-select 下拉選單。

預計：

1. 在 ChargeRequired 選擇時，如果 selectedChargeRequired 為 1，那么 ChargeMode 應該是可見的。
2. 如果 ChargeMode 為 1，ChargeValue 應該是可見的，如果是 2，那么 ChargePercent 應該是可見的。

上面的邏輯是有效的。

如何使ChargeMode、ChargePercent 和 ChargeValue的驗證僅在它們可見時才適用。并且在可見時應該需要它們中的每一個？

謝謝

uj5u.com熱心網友回復：

您可以有條件地在表單控制元件上設定所需的驗證器，也可以將其清除。請參閱此示例。

在 oninit 中，首先訂閱你的表單控制元件的變化。

 this.createTransForm.get('ChargeRequired').valueChanges
                     .subscribe(value => this.toggleValidity(value));

然后定義toggleValidity應用或取消驗證的方法

toggleValidity(selectedChargeRequired : string): void {    
    if(selectedChargeRequired === '1') {
        const chargeModeCntrl = this.createTransForm.get('ChargeMode');    
        chargeModeCntrl.setValidators(Validators.required);
        chargeModeCntrl.updateValueAndValidity();            
    }
    else {
        this.createTransForm.controls["ChargeMode"].setErrors(null);
        this.createTransForm.controls["ChargeMode"].clearValidators();
        this.createTransForm.controls["ChargeMode"].updateValueAndValidity();
    }
}
    

標籤：

上一篇：角材料表-如何將*ngIf放在整個列上？

下一篇：在頂點圖表系列部分中獲得“無窮大”