Question

我正在用角度制作一个小小的待办事项应用程序。

在我的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的模板引用来绑定错误消息。像这样：#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）。

中提取数据

角度验证2

1 个答案: