javascript - 验证不适用于 Angular 模板驱动的表单

Question

我用 Angular 创建了一个表单，并使用模板驱动的表单进行验证和提交。由于某种原因，验证错误不会在提交时出现。这是我的代码：

<form #addSubmit="ngForm" (ngSubmit)="onSubmit(addSubmit)" novalidate="novalidate" autocomplete="off">
<div class="modal-body">
    <div class="form-group">
        <div class="individual_input">
            <span *ngIf="users.length > 0">
            <label>
                <p>User</p>
                <select class="form-control" id="user_select" name="user_id" #ue="ngModel" [(ngModel)]="user_id"  required>
                    <option *ngFor="let user of users" value="{{user.id}}">{{user.userName}}</option>
                </select>
            </label>
            <div [hidden]="!ue.errors?.required" class="invalid-feedback">
                due date is required
            </div>
            </span>
        </div>
    </div>
    <div class="individual_input">
        <label>
            <p>Due Date</p>
            <div class="date_input_wrapper">
                <input type="text" name="due_date" #de="ngModel" [(ngModel)]="due_date" id="due_date"  ngbDatepicker class="personal-input" #s="ngbDatepicker"  placeholder="yyyy-mm-dd" required>
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary calendar" (click)="s.toggle()" type="button">
                        <img src="{{baseUrl}}/assets/images/calendar.svg" width="20" height="18" alt="calendar" class="header-icon">
                    </button>
                </div>
                <div [hidden]="!de.errors?.required" class="invalid-feedback">
                    due date is required
                </div>
            </div>
        </label>
    </div>
    <div class="form-group">
        <div class="individual_input">
            <label>
                <p>Email Content</p>
                <editor apiKey="XXXXXXXXXXX" id="email_content" [init]="init"   name="email_content" #ee="ngModel" [(ngModel)]="email_content" required></editor>
            </label>
            <div [hidden]="!ee.errors?.required" class="invalid-feedback">
                due date is required
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
<button type="submit" class="btn dark">Done</button>
<button type="button" class="btn ghost" (click)="modal.close()">Cancel</button>
</div>
</form>

为什么错误不显示？

标签： javascriptangular