我有一个关于角度2模板驱动形式的问题。我已经设置了这个表单中的一个,如果表单组中的一个输入无效,我希望能够向用户显示警告。
例如,我们说我有以下形式:
<form class="form" #f="ngForm" (submit)="submit()">
<div class="form-group">
<input type="text" name="firstName" required [(ngModel)]="user.firstName">
<input type="text" name="lastName" required [(ngModel)]="user.lastName">
</div>
<div class="form-group">
<input type="text name="address" required [(ngModel)]="user.address">
</div>
<button type="submit" [disabled]="!f.valid">Submit</button>
</form>
我想要包含输入&#34; firstName&#34;的整个表单组。并输入&#34; lastName&#34;如果firstName和/或lastName无效则更改。我知道我可以做那样的事情:
<div class="form-group" [class.has-error]="!firstName.valid || !lastName.valid">
<input type="text" name="firstName" required [(ngModel)]="user.firstName" #firstName="ngModel">
<input type="text" name="lastName" required [(ngModel)]="user.lastName" #lastName="ngModel">
</div>
它会工作得很好。但这里有一个棘手的部分:在这个例子中,我只有两个带有简单验证规则的输入,所以它很容易检查并且仍然可读。但是,如果我有10个输入来检查表单组怎么办?我不想手动检查每个输入的有效性。
我找到的解决方案之一是在第一个中创建一个子表单:
<form class="form" #f="ngForm" (submit)="submit()">
<form #subForm="ngForm" [class.has-error]="!subForm.valid">
<input type="text" name="firstName" required [(ngModel)]="user.firstName">
<input type="text" name="lastName" required [(ngModel)]="user.lastName">
</form>
<div class="form-group">
<input type="text name="address" required [(ngModel)]="user.address">
</div>
<button type="submit" [disabled]="!f.valid || subForm.valid">Submit</button>
</form>
这是我创建的一个用来说明的plunker:
form validation example
但是我发现它很难看,我强行检查这两种形式,以确定是否有任何问题。所以最后我的问题是:我可以将div设置为角度2 ngForm,以便能够一次验证多个输入吗?基本上有没有比创建子表单更好的方法来执行这种验证?例如:
<div class="form-group" #names [class.has-error]="!names.valid">
<input type="text" name="firstName" required [(ngModel)]="user.firstName" #firstName="ngModel">
<input type="text" name="lastName" required [(ngModel)]="user.lastName" #lastName="ngModel">
</div>
答案 0 :(得分:6)
是的,你可以使用ngModelGroup指令。
<form class="form" #f="ngForm" novalidate>
<div class="form-group" #fgName="ngModelGroup" ngModelGroup="name" [class.has-error]="!fgName.valid">
<input type="text" class="form-control" name="firstName"
[(ngModel)]="user.firstName"
placeholder="first name"
required>
<input type="text" class="form-control" name="lastName"
[(ngModel)]="user.lastName"
placeholder="last name"
required>
</div>
<div class="form-group">
<input type="text" class="form-control" name="address"
[(ngModel)]="user.address"
placeholder="address"
required>
</div>
<button class="btn btn-primary" [disabled]="!f.valid">Submit</button>
</form>