模板驱动表单无法读取null-Angular 6的“必需”属性

Question

我正在使用模板驱动的表格处理angular6。在验证方面面临一些问题

html代码

             <div class="form-group">

                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Name" name="name"
                                required [(ngModel)]="configuration.name" #name="ngModel"
                                minlength="2">
                            <span *ngIf="submitted && name.errors['required']" class="text-danger">Please
                                Enter Name</span>


                        </div>
                        <div class="modal-footer">
                <button type="button" class="btn btn-outline-dark" (click)=" sav(form)">Save</button>
    </div>
    </form>

当我在没有任何输入的情况下单击保存按钮时，其显示验证消息，此后，我在该输入文本字段中键入一些值，显示错误

我还尝试了name.errors.required和name.errors？.required都失败

Answer 1

您可以使用以下代码进行最小长度和必填字段验证

  <span *ngIf="submitted && name.errors.required" class="text-danger">Please
                            Enter Name</span>
  <span *ngIf="submitted && name.errors.minlength" class="text-danger">Please
                            Enter 2 characters</span>