angular4+rx自定义表单组件（模版表单/响应式表单部分）

<一>模版表单

1.

    <form #myForm='ngForm'><form>
    相对于传统表单来说 少了一个action属性
    此过程中 使用ngForm表示 angular框架会来接手处理此表单
    #myForm是模版变量；

2.取值

<form #myForm='ngForm' (ngSubmit)='onSubmit(myForm.value)'>
    <input ngModel type='text' name='username'>
<form>
输出 username:'xxx'
/******除此之外还可以这样获取input的值*****/
<input type='text' #val /><button (click)='onclick(val.value)'></button>

3.group

<form #myForm='ngForm' (ngSubmit)='onSubmit(myForm.value)'>
    <input ngModel type='text' name='username'>
    <ng-container ngModelGroup='info'>
        <input type='text' ngModel name='pwd1'>
        <input type='text' ngModel name='pwd2'>
    </ng-container>
<form>
输出
{
    username:'xxx',
    info:{
        pwd1:'xxx',
        pwd2:'xxx'
    }
}

4.模版表单的验证

//第一种方式
<form #myForm='ngForm' (ngSubmit)='onSubmit(myForm.value)'>
    <input ngModel type='text' name='username' required>
    <div [hidden]='!myForm.form.hasError('required','username')'>
        username is required
    </div>
<form>
//第二种方式
<form #myForm='ngForm' (ngSubmit)='onSubmit(myForm.value)'>
    <input #username='ngModel' type='text' name='username' required>
    //如果名字已经填写或者名字为初始值，则隐藏；
    //<div [hidden]='username.valid||username.pristine'>
    //  username is required
    //</div>
    //如果验证不通过并且这个输入框有被触摸或者改变，如果这个值没有填写 则出提示
    <div *ngIf='username.invalid&&(username.touched||username.dirty)'>
        <div *ngIf='username.errors.required'>
            username is required yet
        </div>
    </div>
<form>

<二>响应式表单

1.创建一个响应式表单组件
2.在typescript中声明一个formModel：FormGroup 用来管理整个表单(可以看作一个后台容器)

<form [formGroup]='formModel'> <input type="text" name="username" id="username" formControlName="username"/> <div [hidden] = "formModel.get('username').valid"> <div class="form-validate" [hidden]="!formModel.hasError('required','username')">用户名不能为空</div> <div class="form-validate" [hidden]="!formModel.hasError('minlength','username')">用户名长度不少于6位</div> </div> <div class="form-control height68" formGroupName="passwords"> <div> <label for="password">密码：</label> <input type="password" name="password" id="password" formControlName="password"> </div> <div class="form-validate" [hidden]="!formModel.hasError('minlength',['passwords','password'])"> 密码长度不低于6位 </div> <div> <label for="confirmPass">确认密码:</label> <input type="password" name="confirmPass" id="confirmPass" formControlName="confirmPass"/> </div> </div> <div class="form-validate" [hidden]="!formModel.hasError('equal','passwords')"> {{formModel.getError('equal','passwords')?.desc}} </div> </form> ts: export class rxfComponent{ formModel：FormGroup; //Formbuilder是我们可以采用的另一种方式来创建Form，这种方式是以模型驱动完成的，更适合我们进行编码控制，有利于我们将逻辑与视图分离。 constructor(fb:FormBuilder){ this.formModel=fb.group({ username:['初始值'，[Validators.required,Validators.minlength(11)]], passwords:fb.group({ password: ['123456',Validators.minLength(6)], confirmPass:['123456'] },{ validator:equalValidator }) }) } //equalValidator. 此处是一个函数 }