如何根據先前的欄位輸入角度更改驗證

我有兩個反應形式的角度欄位。我需要驗證第二個欄位并根據選擇的第一個欄位選項顯示錯誤訊息。

場一：

<label>ID proof </b><span >*</span></label>
   <mat-form-field appearance="outline">
     <mat-select name="idproofs" placeholder="IDProof name" required formControlName="idProof" >
     <mat-option *ngFor="let idproof of idproofs" [value]="idproof.value">
        {{idproof.viewValue}}
     </mat-option>
     </mat-select>
  </mat-form-field>

領域二：

<label>ID proof number </b><span >*</span></label>
    <mat-form-field appearance="outline">
       <input matInput placeholder="ID Proof Number" required formControlName="idFroofNumber" >
    <mat-error *ngIf="PGroup.controls['idProofNumber'].hasError('required')">
       ID proof number is required!
    </mat-error>
   </mat-form-field>

第一個欄位中的示例，如果我選擇選項作為Adhaar 號碼，那么在第二個欄位中，驗證必須是最大長度為 12 位字符的數字。

如果我選擇PAN 號碼，那么只有驗證將是最大長度為 10 個字符的字母數字。因此，如果我也可以提供錯誤訊息驗證。我怎么能做到這一點

編輯添加 ts formcontrol

this.PGroup = this._formBuilder.group({
      idProof: ['', Validators.required],
      idProofNumber: ['', [Validators.required,Validators.pattern(/^[\w\s] $/)]]
});

uj5u.com熱心網友回復：

你能提供你的ts代碼嗎？我看到您將 ngModel 與 formControlName 結合使用，我認為這是將反應式方法與模板驅動方法相結合。無論如何，這是我的建議。以這種方式使用反應式方法，（僅建議，您可以根據自己的喜好獲得想法并實施）

// attr declarations
fieldOne = new FormControl('',[]); // initial value and validators inside array
fieldTwo = new FormControl('', []); // initialValue and validators

// ngOnInit
fieldOne.valueChanges.
.pipe(
debounceTime(100),   // dalay after every change to update your validations
distinctUntilChanged(), // only update validators when value change
tap(value => {

// depend on your options you can use switch here
   if(value === 'Adhaar number'){
    this.fieldTwo.setValidators([Validators.required,Validators.maxLength(12)]);
    this.fieldTwo.updateValueAndValidity();
  } else 
 if(value === 'PAN number'){
    this.fieldTwo.setValidators([Validators.required,Validators.maxLength(10)]);
    this.fieldTwo.updateValueAndValidity();
  } else {
this.fieldTwo.setValidators([Validators.required]);
    this.fieldTwo.updateValueAndValidity();
}
})

)
.subscribe()

根據您可能的錯誤更新您的 html。

您也可以使用帶有兩個欄位的 formGroup 而不是單獨的 formControls，并且只將訂閱從 this.fieldOne.valueChanges 更改為 this.form.get('fieldOne').valueChanges

uj5u.com熱心網友回復：

我認為你可以做這樣的事情，

假設你有一個名為 AppComponent 的組件，

import { Component } from '@angular/core';
import { 
  FormBuilder,
  FormGroup,
  FormControl, 
  ValidationErrors, 
  AbstractControl, 
  ValidatorFn 
} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
    title = 'stackoverflow-examples';
    panelOpenState = false;
    idproofOptions: string[] = ['Aadhar','PAN'];
    idproofsForm: FormGroup;

    get idproofsFormControl(): FormControl {
      // debugger
      return this.idproofsForm.controls['idproofs'] as FormControl;
    }

    get idproofsInputFormControl(): FormControl {
      // debugger
      return this.idproofsForm.controls['idproofsInput'] as FormControl;
    }

    idproofInputAadharValidation(): ValidatorFn {
      return (control: AbstractControl): ValidationErrors | null => {
        // debugger
        const pattern = new RegExp("^[0-9]{10}$");
        if (pattern.test(control.value)) {
          return null;
        } else {
          return {
            aadharError: 'Aadhar number is not correct'
          };
        }
      };
    }

    idproofInputPANValidation(): ValidatorFn {
      return (control: AbstractControl): ValidationErrors | null => {
        // debugger
        const pattern = new RegExp("^[a-zA-Z0-9] $");
        if (pattern.test(control.value)) {
          return null;
        } else {
          return {
            panError: 'PAN number is not correct'
          };
        }
      };
    }

    constructor(
      private fb: FormBuilder
    ) { 
      this.idproofsForm = new FormGroup(
        {
          idproofs: new FormControl(''),
          idproofsInput: new FormControl('')
        }
      );
    }

    ngOnInit() {
      this.idproofsForm.valueChanges.subscribe(
        field => {
          // debugger
          console.log(this.idproofsForm.controls['idproofsInput']);
          if (field['idproofs'] && field['idproofs'] === 'PAN') {
            this.idproofsInputFormControl.clearValidators();
            this.idproofsInputFormControl.setValidators(this.idproofInputPANValidation());
          } else if (field['idproofs'] && field['idproofs'] === 'Aadhar') {
            this.idproofsInputFormControl.clearValidators();
            this.idproofsInputFormControl.setValidators(this.idproofInputAadharValidation());
          }
          // debugger
        }
      );
    }

}

你的 HTML 看起來像這樣，

<label>ID proof<span >*</span></label>
<mat-form-field appearance="outline">
  <mat-select [formControl]="idproofsFormControl" name="idproofs" placeholder="IDProof name" required >
    <mat-option  *ngFor="let idproof of idproofOptions" [value]="idproof">
      {{idproof}}
    </mat-option> 
  </mat-select>
</mat-form-field>
<br/>
<!-- {{idproofsInputFormControl|json}} -->
<label>ID proof number<span >*</span></label>
<mat-form-field appearance="outline">
  <input matInput placeholder="ID Proof Number" required [formControl]="idproofsInputFormControl" >
  <mat-error *ngIf="idproofsInputFormControl.errors">
      {{idproofsInputFormControl.errors['aadharError']}}
  </mat-error>
</mat-form-field>

在螢屏截圖中查看下面的錯誤

注意：我的建議是您不要使用 ngModel，反應式方法要好得多，您可能需要稍微更改此代碼以滿足您的要求，但我相信它應該會有所幫助

標籤：有角的 角反应形式

上一篇：洗掉APIAngular中的重復項

下一篇：在angular12中定義類的空串列的問題