角度所需的输入验证答案

【问题标题】：required input validation in angular角度所需的输入验证
【发布时间】：2021-09-20 20:33:46
【问题描述】：

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

    <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 文件中添加什么以确保不会提交空输入？

【问题讨论】：

记住错误信息将在用户模糊文本框一次后显示。

标签： html angular typescript forms

【解决方案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 = '';

【讨论】：

【解决方案2】：

如果输入是响应式表单的一部分，您可以使用验证器 require() 函数：

ngOnInit(): void {
    this.form = new FormGroup({
        newTask: new FormControl('', [Validators.required]),
    });
}

【讨论】：