转载自 http://www.ngui.cc/news/show-141.html
如何使用表单?
在 Angular 中,我们可以使用熟悉的 <form> 标签来创建表单。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<form>
<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>
<button type="submit">提交</button>
</form>
`,
})
export class AppComponent {
username = 'semlinker';
}
需要注意的是,在使用 <form> 标签后,我们的 username 输入框,必须添加 name 属性。
如何获取表单提交的值?
在 Angular 中,我们可以通过 #loginForm="ngForm" 方式获取 ngForm 对象,然后通过 loginForm.value 来获取表单的值。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
<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>
<button type="submit">提交</button>
{{loginForm.value | json}}
</form>
`,
})
export class AppComponent {
username = 'semlinker';
onSubmit(value) { console.dir(value);
}
}