html - 角度所需的输入验证

Question

我正在尝试验证一个不能为空的必需输入。

    <input
        type="text"
        id="task"
        name="task"
         [(ngModel)]="newTask"
          (keyup.enter)="addTask()"
          class="form-control form-control-lg"
          #task="ngModel"
          required
         placeholder="Add new task and hit enter key">

         <div *ngIf="task.invalid && (task.dirty || task.touched)"
         class="alert">
       <div *ngIf="task.errors?.required">
         Task is required. 
       </div>
  </div>

我应该在 ts 文件中添加什么以便不提交空输入？

标签： htmlangulartypescriptforms

Answer 1

您只需将newTask字段添加到您的组件类中，一切都会正常工作。

检查这个stackblitz。

app.template.html

  <input
        type="text"
        id="task"
        name="task"
         [(ngModel)]="newTask"
          (keyup.enter)="addTask()"
          class="form-control form-control-lg"
          #task="ngModel"
          required
         placeholder="Add new task and hit enter key">

         <div *ngIf="task.invalid && (task.dirty || task.touched)"
         class="alert">
       <div *ngIf="task.errors?.required">
         Task is required. 
       </div>
  </div>

app.component.ts

public newTask: string = '';