angular - 反应式表单选择标签验证

Question

我正在对选择标签验证进行反应式表单验证，但它的验证不起作用。这是一个基本的反应式表单验证，我已经完成了其他字段的验证，它们正在工作，但是对选择标记（状态输入字段）的一个验证不起作用。

.html 文件

<div class="container">
  <form [formGroup]="info" (ngSubmit)="onSubmit">
    <h1>Info</h1>
    <div>
      <label>First Name</label>
      <input
        type="text"
        formControlName="firstName"
        class="form-control"
        [ngClass]="{ 'is-invalid': f.firstName.touched && f.firstName.errors }"
      />
      <div
        *ngIf="f.firstName.touched && f.firstName.errors"
        class="alert alert-danger"
      >
        <div *ngIf="f.firstName.errors.required">First Name is required</div>
        <div *ngIf="f.firstName.errors.minlength">Minimum 3 characters</div>
        <div *ngIf="f.firstName.errors.maxlength">Maximum 10 characters</div>
        <div *ngIf="f.firstName.errors.pattern">Only alphabets</div>
      </div>
    </div>

    <div>
      <label>Last Name</label>
      <input
        type="text"
        formControlName="lastName"
        class="form-control"
        [ngClass]="{'is-invalid':f.lastName.touched && f.lastName.errors}"
      />
      <div *ngIf="f.lastName.touched && f.lastName.errors">
        <div *ngIf="f.lastName.errors.required">Last name required</div>
        <div *ngIf="f.lastName.errors.minlength">Minimum 3 characters</div>
        <div *ngIf="f.lastName.errors.maxlength">Minimum 10 characters</div>
      </div>
    </div>

    <div>
      <label for="">Gender</label>

      <input
        type="radio"
        formControlName="gender"
        class="form-control"
        value="male"
      /><span>male</span>
      <input
        type="radio"
        formControlName="gender"
        class="form-control"
        value="female"
      /><span>female</span>
      <input
        type="radio"
        formControlName="gender"
        class="form-control"
        value="other"
      /><span>other</span>

      <div>
        <div *ngIf="f.gender.touched && f.gender.errors">
          <div>Gender required</div>
        </div>
      </div>
    </div>

    <div>
      <label for="state">State</label>
      <select id="state" formControlName="state" class="form-control" 
      [ngClass]="{'is-invalid':f.state.touched && f.state.errors}">
        <option value=""></option>
        <option value="Delhi">Delhi</option>
        <option value="UP">UP</option>
        <option value="Karnataka">Karnataka</option>
        <option value="Bihar">Bihar</option>
        <div>
        <div *ngIf="f.state.errors.touched && f.state.errors">
          <div *ngIf="f.state.errors.required">state required</div>

        </div></div>
      </select>
    </div>

    <div>
      <label for="qualification">qualification</label>
      <input
        type="checkbox"
        formControlName="qualification"
        class="form-control"
        value="Graduate"
      /><span>Graduate</span>
      <input
        type="checkbox"
        formControlName="qualification"
        class="form-control"
        value="Post Graduate"
      /><label>Post Graduate</label>

      <div>
        <div *ngIf="f.qualification.touched && f.qualification.errors">
          <div>qualification required</div>
        </div>
      </div>
    </div>
    <div>
      <button type="submit" (click)="onSubmit" [disabled]="info.invalid">
        submit
      </button>
    </div>
  </form>
</div>

ts文件

import { Component,OnInit } from "@angular/core";
import { FormGroup,FormBuilder, Validators } from "@angular/forms";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit{
  title = "CodeSandbox";
  info: FormGroup;
  submitted:boolean;
  regex:any="^[A-Za-z]*";


  constructor(private fb:FormBuilder){

  }
  ngOnInit(){
    this.valueInfo();
  }
  valueInfo(){
    this.info=this.fb.group({
      firstName:['',[Validators.required,
        Validators.minLength(3),
        Validators.maxLength(10),
        Validators.pattern(this.regex)]],
      lastName:['',[Validators.required,
        Validators.minLength(3),
        Validators.maxLength(10),
        Validators.pattern(this.regex)]],
      gender:['',Validators.required],
      state:['',Validators.required],
      qualification:['',Validators.required]
})
  }
  get f(){
    return this.info.controls;
  }
}

标签： angularangular-reactive-forms

Answer 1

你用过 f.state.errors.touched它一定是刚刚f.state.touched

  <div *ngIf="f.state.touched && f.state.errors">
              <div *ngIf="f.state.errors.required">state required</div>

            </div></div>

编辑：

我还注意到您已将原本应位于 select 之外的 divHTMLelement放在 Select Tag 中，显示错误消息，如下所示。

  <div>
      <label for="state">State</label>
      <select id="state" formControlName="state" class="form-control" 
      [ngClass]="{'is-invalid':f.state.touched && f.state.errors}">
         <option value=""></option>
        <option value="Delhi">Delhi</option>
        <option value="UP">UP</option>
        <option value="Karnataka">Karnataka</option>
        <option value="Bihar">Bihar</option>

      </select>
         <div>
        <div *ngIf="f.state.touched && f.state.errors">
          <div *ngIf="f.state.errors.required">state required</div>

        </div></div>
    </div>

我创建了一个包含所有更改的stackblitz.com 。