Angular8多個驗證器不起作用

我有一個反應式表單控制元件，它有 1 個以上的驗證器。我將其定義為以下方法，并且沒有一個實際上沒有對其進行驗證。下面是我試過的代碼。

1 方法

civilIdNumber: new FormControl("", Validators.compose([Validators.required, Validators.minLength(12), Validators.maxLength(12), Validators.pattern("^[0-9]*$")])), 

2 方法

civilIdNumber: new FormControl("",[Validators.required, Validators.minLength(12), Validators.maxLength(12), Validators.pattern("^[0-9]*$")])

html代碼

<form [formGroup]="customerForm">
    <div class="col-sm-6">
              <div class="form-group">
                <label for="civil">Civil ID Number</label>
                <input
                  type="number"
                  placeholder="Civil ID Number"
                  class="form-control"
                  id="civil"
                  formControlName="civilIdNumber"
                  required
                  [ngClass]="{ 'is-invalid': customerForm.controls.civilIdNumber.invalid && customerForm.controls.civilIdNumber.touched }"
                />

                <div *ngIf="customerForm.controls['civilIdNumber'].invalid && (customerForm.controls['civilIdNumber'].dirty || customerForm.controls['civilIdNumber'].touched)" class="text-danger">
                  <div *ngIf="customerForm.controls['civilIdNumber'].errors.required">Civil ID Number required</div>
                </div>
              </div>
     </div> 
</form>

uj5u.com熱心網友回復：

您沒有正確系結您的控制元件。表單控制元件名稱僅在formGroup父級背景關系中有意義（或 formArray 但以免跳過）

<div class="col-sm-6" [formGroup]="customerForm"> <!-- this makes it work -->
          <div class="form-group">
            <label for="civil">Civil ID Number</label>
            <input
              type="number"
              placeholder="Civil ID Number"
              class="form-control"
              id="civil"
              formControlName="civilIdNumber"
              required
              [ngClass]="{ 'is-invalid': customerForm.controls.civilIdNumber.invalid && customerForm.controls.civilIdNumber.touched }"
            />

            <div *ngIf="customerForm.controls['civilIdNumber'].invalid && (customerForm.controls['civilIdNumber'].dirty || customerForm.controls['civilIdNumber'].touched)" class="text-danger">
              <div *ngIf="customerForm.controls['civilIdNumber'].errors.required">Civil ID Number required</div>
            </div>
          </div>
</div>

uj5u.com熱心網友回復：

在你的 .ts

customerForm: FormGroup;
constructor(formBuilder: FormBuilder) {
this.customerForm = this.formBuilder.group(
   {
    civilIdNumber: ["", [Validators.required, Validators.minLength(12), 
    Validators.maxLength(12), Validators.pattern("^[0-9]*$")] ]
   }
)
}

在你的 .html

<div class="col-sm-6" [formGroup]="customerForm"> <!-- this makes it work -->
          <div class="form-group">
            <label for="civil">Civil ID Number</label>
            <input
              type="number"
              placeholder="Civil ID Number"
              class="form-control"
              id="civil"
              formControlName="civilIdNumber"
              required
              [ngClass]="{ 'is-invalid': customerForm.get('civilIdNumber').invalid && customerForm.get('civilIdNumber').touched }"
            />

            <div *ngIf="customerForm.get('civilIdNumber').invalid && (customerForm.get('civilIdNumber').dirty || customerForm.get('civilIdNumber').touched)" class="text-danger">
              <div *ngIf="customerForm.get('civilIdNumber').errors.required">Civil ID Number required</div>
            </div>
          </div>
</div>

標籤：有角的 打字稿 角反应形式

上一篇：使用路由時如何從app.component.ts呼叫API

下一篇：如何在Angular中使用Ace-Editor？