Angular2中的按钮单击验证

Question

<form>
  <div class="ui-input-group">
    <input #model="ngModel" type="text" class="form-control" required placeholder="Name*" name="visitorName" [(ngModel)]="visitorName">
    <span class="input-bar"></span>
    <div  *ngIf="model.errors && (modeltitle.dirty || model.touched)"  style="color: red">
       Required
    </div>

   <button class="icon-btn" id="addVisitor" title="Add" (click)="addVisitor()">
   <i class="fa fa-plus-circle"></i></button>
  </div>
</form>

如果输入字段为空，则应禁用按钮单击， 我怎样才能实现呢？目前验证消息没有显示，上面的代码出了什么问题。

这就像默认验证消息：

Answer 1

<form #myForm="ngForm">
    <div class="ui-input-group">
        <input #model="ngModel" type="text" class="form-control" required placeholder="Name*"
               name="visitorName" [(ngModel)]="visitorName">
        <span class="input-bar"></span>
        <div *ngIf="model.errors && (modeltitle.dirty || model.touched)" style="color: red">Required
        </div>
    </div>

    <button class="icon-btn" id="addVisitor" title="Add" (click)="addVisitor()"
            [disabled]="!myForm.form.valid">
        <i class="fa fa-plus-circle"></i></button>
</form>

Answer 2

你可以做这样的事情

<form #f="ngForm">
    <div class="ui-input-group">
        <input #model="ngModel" 
                type="text" class="form-control" placeholder="Name*"
               name="visitorName" [(ngModel)]="visitorName">
        <span class="input-bar"></span>
        <div *ngIf="model.errors && (modeltitle.dirty || model.touched)" 
         style="color: red">Required
        </div>
    </div>
    <button class="icon-btn" id="addVisitor" title="Add" (click)="addVisitor()" 
    [disabled]="!f.valid"> <i class="fa fa-plus-circle"></i></button>
</form>

如果您不想要消息Please fill out this field，请删除input中的require属性，并在表单中添加novalidate

<form novalidate #f="ngForm"> ...

Answer 3

听起来你想要原生验证。从Angular 4开始，默认设置为$。所以现在你必须明确告诉Angular提供它。我们可以用

做到这一点

novalidate

表单标签中的

。

此外，您还必须对表单进行一些更改。您需要创建ngNativeValidate 类型的按钮，否则当您在表单无效时单击提交时，方法submit仍将被触发。但是，如果您的按钮是addVisitor()，则不会触发该方法。这也意味着您应该在表单标记中设置type="submit"。所以将表单更改为：

(ngSubmit)="addVisitor()"