如何在表单中验证 angular 反应式下拉菜单

Question

我想为我的下拉菜单设置验证。 这是我的模板代码...

<div class="form-group row">
    <label class="col-lg-4 col-form-label" for="val-skill">Designation <span class="text-danger">*</span>
    </label>
    <div class="col-lg-6">
        <select class="form-control"id="val-skill" name="val-skill">
            <option value="">Please select</option>
            <option value="admin">Admin</option>
            <option value="staff">Staff</option>
        </select>
    </div>
    <div *ngIf="accessName.touched && accessName.invalid">
        <div *ngIf="accessName.errors.required">
            <div class="alert alert-danger">
                Select access type
            </div>
        </div>
    </div>
</div>

这是我的表单控制代码...

form = new FormGroup({
    accessName:new FormControl('',Validators.required),
});

get accessName() {
    return this.form.get("accessName");
}

下拉菜单默认选择为“请选择”。 当用户触摸下拉菜单并且没有更改类型时，它应该显示验证错误。

我该如何执行此操作？

Answer 1

<select class="form-control"  formControlName="accessName" id="val-skill" name="val-skill">
   <option value="">Please select</option>
   <option [value]="admin">Admin</option>
   <option [value]="staff">Staff</option>
 </select>

Answer 2

当您可以使用反应式表单时，请使用以下格式来验证您的表单。 请参阅以下链接https://codesandbox.io/s/angular-1xffg

Html 代码

<section class="py-3">
  <div class="container">
    <form [formGroup]="simpleForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <select
          class="form-control"
          formControlName="accessName"
          id="val-skill"
          name="val-skill"
          [ngClass]="{ 'is-invalid': submitted && f.accessName.errors }"
        >
          <option value="">Please select</option>
          <option value="admin">Admin</option>
          <option value="staff">Staff</option>
        </select>
        <div class="invalid-feedback" *ngIf="submitted && f.accessName.errors">
          <div *ngIf="f.accessName.errors.required">
            Access Name is required
          </div>
        </div>
      </div>
      <button class="btn btn-primary">Submit</button>
    </form>
  </div>
</section>

.ts 文件

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "CodeSandbox";

  simpleForm: FormGroup;
  submitted = false;

  constructor(private formBuilder: FormBuilder) {
    this.simpleForm = this.formBuilder.group({
      accessName: ["", [Validators.required]]
    });
  }

  get f() {
    return this.simpleForm.controls;
  }
  onSubmit() {
    this.submitted = true;
    // stop here if form is invalid
    if (this.simpleForm.invalid) {
      return;
    }
    console.log(this.simpleForm.value);
  }
}