如何验证形式的角电抗下拉

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