按照官网执行
npm install -g @angular/cli
ng new my-app
再执行
ng serve --open
报错
这是因为没有在my-app文件夹目录下执行,官网的指令是
自己执行命令时,少写了 cd my-app。
模板表单有三个指令:ngForm 、ngModelGroup和ngModel,都是来自FormsModule,因此要在app.module.ts中,
1.导入 FormsModule
。
2.把 FormsModule
添加到 ngModule
装饰器的 imports
列表中,这样应用就能访问模板驱动表单的所有特性,包括 ngModel
。
app.component.html的内容
<form #myForm = "ngForm" action="" (ngSubmit)="onSubmit(myForm.value)">
<div> 用户名:<input #username = "ngModel" ngModel type="text" name="username"></div>
<div> 电话:<input ngModel type="number" name="mobile"></div>
<div ngModelGroup = "passwordGroup">
<div> 密码:<input ngModel type="password" name="password"></div>
<div>确认密码:<input ngModel type="password" name="pconfirm"></div>
</div>
<div><button type="submit">注册</button></div>
</form>
app.component.ts中
onSubmit(value: any){
console.log(value)
}
响应式表单:
<form [formGroup]="registForm" (ngSubmit)="onSubmit()">
<div>用户名<input type="text" placeholder="请输入用户名" formControlName="username" /></div>
<div [hidden]="registForm.get('username').valid || registForm.get('username').untouched">
<p [hidden]="!registForm.hasError('required','username')">用户名是必填的</p>
<p [hidden]="!registForm.hasError('minlength','username')">用户名最小长度是6</p>
</div>
<div>手机号码:<input type="text" placeholder="请输入手机号码" formControlName="mobile"/></div>
<div [hidden]="registForm.get('mobile').valid || registForm.get('mobile').pristine">
<p [hidden]="!registForm.hasError('mobile', 'mobile')">{{registForm.getError('mobile', 'mobile')?.info}}</p>
</div>
<div formGroupName="passwordGroup">
<div>密码:<input type="password" placeholder="请输入密码" formControlName="password" /></div>
<div [hidden]="!registForm.hasError('minlength',['passwordGroup','password'])">密码最小长度是6 </div>
<div>确认密码:<input type="password" placeholder="请再次输入密码" formControlName="pconfirm"/></div>
<div [hidden]="!registForm.hasError('equal','passwordGroup') || this.registForm.get('passwordGroup').get('pconfirm').untouched || registForm.hasError('minlength',['passwordGroup','password'])">
{{registForm.getError('equal', 'passwordGroup')?.info}}
</div>
</div>
<div><input type="submit" value="注册" [disabled]="!registForm.valid" /></div>
</form>
app.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
private registForm: FormGroup;
mobileValidator(control: FormControl): any{
const mobileReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
const result = mobileReg.test(control.value);
return result ? null : { mobile: { info: '请输入正确的手机号' } };
}
equalValidator(group: FormGroup): any {
const password = group.get('password') as FormControl;
const pconfirm = group.get('pconfirm') as FormControl;
const isEqule: boolean = ( password.value === pconfirm.value);
return isEqule ? null : { equal: { info: '两次密码不一致' } };
}
constructor(private fb: FormBuilder) {
this.registForm = this.fb.group({
username: ['', [Validators.required, Validators.minLength(6)]],
mobile: ['',this.mobileValidator],
passwordGroup: this.fb.group({
password: ['',Validators.minLength(6)],
pconfirm: ['']
},{validator: this.equalValidator})
});
}
onSubmit(){
console.log(this.registForm.get('username').valid)
console.log(this.registForm.get('mobile').valid)
console.log(this.registForm.get('passwordGroup').valid)
console.log(this.registForm.get('passwordGroup').get('pconfirm').valid)
if(this.registForm.valid){
alert(1)
}
}
}