AngularValidators.required不適用于ngIf隱藏/顯示-有解無憂

Angular 12，反應形式，當為選擇是時Adult，用戶需要輸入年齡，否則不需要。

HTML：

Are you adult?
<input type="radio" formControlName="Adult" value="1"/><label>Yes</label>
<input type="radio" formControlName="Adult" value="0"/><label>No</label>

<div *ngIf="fg.controls['Adult'].value==1">
Enter your age: <input type="text" placeholder="18-120" formControlName="Age" size="5"/>
</div>

TS：

public fg: FormGroup;
this.fg = this.fb.group
(
  {
    Adult: ['', [Validators.required]],
    Age: ['', [Validators.required, Validators.min(18), Validators.max(120)]]
  }
)

由于隱藏/顯示，Angular 不夠聰明，無法忽略驗證。Formgroupfg.valid是false當用戶選擇No時，即使Age是隱藏的。處理這種動態事物的一種方法是使用addValidators([...]) / clearValidators() / setValidators([...])then對邏輯進行硬編碼updateValueAndValidity()。有沒有更好的辦法？

更新我想要的是 Angular 在用戶選擇是時跳過驗證規則，因為Age它是隱藏的。

Age: ['', [Validators.required, Validators.min(18), Validators.max(120)]]

為了實作這一點，我現在必須

附加(blur)=dynamicAge()到Adult單選按鈕
在里面dynamicAge()檢查并設定Age如下驗證規則。

private dynamicAge()
{
  if (fg.controls['Adult'].value == 0) // not Adult
  {
    fg.controls['Age'].clearValidators(); // so fg.valid becomes true.
    fg.controls['Age'].updateValueAndValidity();
  }
}

有沒有更好的辦法？

uj5u.com熱心網友回復：

我最近在我的應用程式中做了這樣的事情：

<kendo-maskedtextbox formControlName="webrelay_input_4_alarm_name"
    [disabled]="!ConfigForm.get('webrelay_input_4_alarm_used')?.value">
</kendo-maskedtextbox>

你的代碼：

<form [formGroup]="fg" (ngSubmit)="onSubmit(fg)">
    <div *ngIf="fg.get['Adult']?.value == 1">
        Enter your age:
        <input type="text" placeholder="18-120" formControlName="Age" size="5" />
    </div>
</form>

uj5u.com熱心網友回復：

您可以收聽Adult表單控制valueChanges，然后根據您的條件啟用或禁用表單。

當您禁用表單控制元件時，角度將自動排除驗證檢查

 get ageControl(){
   return this.fg.get('Age') as FormControl;
 }

 this.fg.get('Adult').valueChanges.subscribe(()=>{
      if(value ==1){
        this.ageControl.enable()
      }else{
        this.ageControl. disable();
     }
 });

uj5u.com熱心網友回復：

我個人會使用 RxJS 來處理邏輯并洗掉或添加控制元件。

isAdult$ | async負責訂閱和取消訂閱組件銷毀。從概念上講，我認為年齡值應該是真或假，而不是字串“1”或“0”。這增加了Validators.requiredTrue做年齡控制所需的好處。

import { Component} from '@angular/core';
import {
  FormBuilder,
  FormControl,
  FormGroup,
  Validators,
} from '@angular/forms';
import { map, Observable, tap } from 'rxjs';

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="fg">
      Are you adult?
      <input type="radio" formControlName="Adult" [value]="true"/><label>Yes</label>
      <input type="radio" formControlName="Adult" [value]="false"/><label>No</label>

      <div *ngIf="isAdult$ | async">
        Enter your age: <input type="number" placeholder="18-120" formControlName="Age"/>
      </div>
    </form>

    <br/>
    <br/>
    <br/>
    Form - {{ fg.valid ? 'Valid': 'Invalid' }}
    <pre>{{ fg.value | json }}</pre>
  `
})
export class AppComponent {

  fg: FormGroup = this.fb.group({
    Adult: [null, [Validators.required, Validators.requiredTrue]],
  });

  isAdult$: Observable<boolean>;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.isAdult$ = this.fg.controls['Adult'].valueChanges.pipe(
      // add age control if user check `Yes` to `Are you an adult?`
      tap((value) => this.onAdultValueChangeAddOrRemoveAgeControl(value))
    );
  }

  onAdultValueChangeAddOrRemoveAgeControl(value) {
    if (value) {
      // check age of adult
      this.fg.addControl('Age',
        new FormControl(null, [
          Validators.required,
          Validators.min(18),
          Validators.max(120),
        ])
      );
    } else {
      // a child!
      this.fg.removeControl('Age');
    }
  }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/508377.html

標籤：有角度的打字稿验证

上一篇：React/Typescript-使用ref時出現typescript錯誤-型別'(instance:HTMLInputElement|null)=>void'上不存在屬性&

下一篇：當第一個屬性在列舉中時，Typescript區分的聯合型別不強制執行所需的第二個屬性