html - Angular 2 中的验证

Question

我正在制作一个带 Angular 小型待办事项应用。

在我的 component.html 中我想要一个验证。如果您在文本框中不输入任何内容，那么我的文本将显示为“需要标题”。当文本框中的字符少于 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>

Answer 1

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

双向绑定(bind)不能使用相同的名称，因此它们必须不同。这里我实际上已经将双向绑定(bind)变量的名称更改为 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>

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