角度 2 中的验证答案

【问题标题】：validation in angular 2角度 2 中的验证
【发布时间】：2017-05-12 16:26:28
【问题描述】：

我正在用 angular 制作一个小 todo 应用程序。

在我的 component.html 中，我想要一个验证。如果您在文本框中不输入任何内容，则 i 文本将显示为“需要标题”。当文本框中的字符少于 5 个时，还会显示一个文本。

但这不起作用..

当我启动我的应用程序时，我只看到我的文本框而没有我的待办事项。当我在文本框中输入 1 个字母时，我会看到我的待办事项。此外，当我只有 4 个字符时，我看不到任何通知说我必须有 5 个字符..

这是我的代码：

    <h3>Add todo</h3>
<form >

  <input class="form-control" type="text" id="text" required minlength="5" [(ngModel)]="text" name="text" >
  <div *ngIf="text.errors && (text.dirty || text.touched)" class="alert alert-danger">
    <div [hidden]="!text.errors.required">
      Title is required 
    </div>
    <div [hidden]="!text.errors.minlength">
      titel moet minstens 5 karakters zijn
    </div>
  </div>

</form>
<button class="btn btn-danger" (click)="addTodo()">test</button>

【问题讨论】：

标签： html angular validation

【解决方案1】：

您需要使用带有ngModel 的模板引用来绑定错误消息。像这样：#text="ngModel"。

双向绑定不能使用相同的名称，因此它们必须不同。这里我其实已经把双向绑定变量的名字改成了theText：

<input type="text" id="text" required minlength="5" [(ngModel)]="theText" 
         name="text" #text="ngModel">

这是完整的模板，请注意我们为表单提供了模板引用 #myForm="ngForm"，并在提交时传递该表单中的值：

<form #myForm="ngForm" (ngSubmit)="submitForm(myForm.value)">
  <input type="text" id="text" required minlength="5" [(ngModel)]="theText" name="text" #text="ngModel" >
    <div *ngIf="text.errors && (text.touched || text.dirty)" class="alert alert-danger">
      <div [hidden]="!text.errors?.required">
        Title is required 
      </div>
      <div [hidden]="!text.errors?.minlength">
        titel moet minstens 5 karakters zijn
     </div>
  </div>
</form>

作为旁注，您甚至可能不需要双向绑定 (??) 吗？您可以从表单值 (myForm.value) 的对象中提取数据。

【讨论】：