我正在用角度制作一个小小的待办事项应用程序。
在我的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>
答案 0 :(得分:0)
您需要使用带有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
)。