转载自 http://www.ngui.cc/news/show-142.html
ngModelGroup 有什么作用?
ngModelGroup 指令是 Angular 表单中提供的另一特殊指令,可以对表单输入内容进行分组,方便我们在语义上区分不同性质的输入。例如联系人的信息包括姓名及住址,现在需对姓名和住址进行精细化信息收集,姓名可精细化成姓和名字,地址可精细化成城市、区、街等。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
<fieldset ngModelGroup="user">
<input
type="text"
required
minlength="3"
name="username"
[(ngModel)]="username"
#userName="ngModel">
<hr>
<div *ngIf="userName.errors?.required">请您输入用户名</div>
<div *ngIf="userName.errors?.minlength">
用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}},当前的长度为
{{userName.errors?.minlength.actualLength}}
</div>
<input type="password" ngModel name="password">
</fieldset>
<button type="submit">提交</button>
<hr>
{{loginForm.value | json}}
</form>
`,
})
export class AppComponent {
username = 'semlinker';
onSubmit(value) { console.dir(value);
}
}
以上代码成功运行后,{{loginForm.value | json}} 的输出结果:
{ "user": { "username": "semlinker", "password": "123" } }