Question

你好，我有这个表格：

<form (ngSubmit)="create()" #form="ngForm">
<input type="text" id="name" class="form-control" [(ngModel)]="data.name"
 [ngModelOptions]="{standalone: true}" #name="ngModel" required>
<p *ngIf="name.invalid && (name.dirty || name.touched) && 
 name.errors.required" class="text-danger">Error</p>

<button type="submit" class="btn btn-primary btn-block btn-flat" 
  [disabled]="form.invalid">Send</button>
</form>

我对验证有疑问。输入可以验证，但是按钮仍处于启用状态。当输入为空时，我想禁用按钮。表单无效时如何禁用按钮？谢谢

Answer 1

为了使输入元素在表单验证中被考虑，您应该删除standalone选项，并为该元素赋予name属性：

<input type="text" name="nameInput" [(ngModel)]="data.name" #name="ngModel" required ...>

有关演示，请参见this stackblitz。

以下是Angular documentation中给出的standalone选项的说明：

独立：默认为false。如果将其设置为true，则ngModel 不会以其父表格注册自己，并且会像不在表单中。

Answer 2

您可以在CSS框架中使用内置的Validation，而我使用MD-Bootsrap（材料设计），请参见form validation演示

角度-表单无效时禁用发送按钮

2 个答案: