首页 专题 H5案例 前端导航 UI框架

Angular4 开发实战:(9) 创建表单

阅读 1660 评论 0
Angular的表单给我们提供了很多便捷的操作。

简单的表单:

// demo-form.component.html   

<div class="box">   

  <form #userForm="ngForm" (ngSubmit)="onSubmit()" novalidate>   

    <div>   

      <label>   

        用户:<input type="text" name="name" [(ngModel)]="name">   

      </label>   

    </div>   

    <div>   

      <label>   

        电话:<input type="text" name="tel" [(ngModel)]="tel">   

      </label>   

    </div>   

    <div>   

      <label>   

        性别:   

        <select [(ngModel)]="sex" name="sex" >   

          <option value="man">男</option>   

          <option value="female">女</option>   

        </select>   

      </label>   

    </div>   

    <button type="submit" >发布</button>   

  </form>  

</div>

在上面的代码中,我们定义了一个模板变量#userForm,它的值是ngForm。 注:
  • NgForm指令为form增补了一些额外特性。 它会控制那些带有ngModel指令和name属性的元素,监听他们的属性(包括其有效性)。 它还有自己的valid属性,这个属性只有在它包含的每个控件都有效时才是真。
  • 当使用ngForm方式创建表单时,其内部的每个 input 元素都必须有name属性,Angular 表单用它注册控件。实质上是ngModelname属性一起创建了一个FormControl
表单验证 html5内置的数据验证包括Required、minLength、maxLength、pattern ,我们可以将这些标签应用到我们的输入控件上。 这些验证整合起来说就是:表单是合法(valid)的,还是不合法(invalid)的。 我们来修改一下代码:

// demo-form.component.html   

<div class="box">   

  <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm.form.valid)" novalidate>   

    <div>   

      <label>   

        用户:<input type="text" name="name" [(ngModel)]="name" required>   

      </label>   

      <p *ngIf="userForm.controls['name']?.invalid" class="error">用户名必填</p>   

    </div>   

    <div>   

      <label>   

        电话:<input type="text" name="tel" [(ngModel)]="tel" pattern="1[3|5|8]\d{9}" required>   

      </label>   

    </div>   

    <div>   

      <label>   

        性别:   

        <select [(ngModel)]="sex" name="sex" required>   

          <option value="man">男</option>   

          <option value="female">女</option>   

        </select>   

      </label>   

      <p *ngIf="userForm.controls['sex']?.errors?.required"></p>   

    </div>   

    <button type="submit" [disabled]="!userForm.form.valid">发布</button>   

  </form>  

</div>

在上面的代码中,我们为三个表单都增加required必填属性,同时在提交按钮上添加disabled属性,并且值是userForm.form.valid,这表示只有当前form里所有表单元素(input,select等)都合法时,才可以提交,否则禁用按钮。 还有在input[name='name']底部添加一个验证提示:

<p *ngIf="userForm.controls['name']?.invalid" class="error">用户名必填</p>

在前面提过,Angular使用ngModelname属性构建了一个FormControl,这也是我们可以通过NgForm.controls获取里面所有具有name属性的表单,它是一个数组。 而对于每一个FormControl,它都有以下验证属性: errors errors包含了表单所有的验证内容。比如:

form.controls.name.errors.required // 必填项  

form.controls.name.errors.minlength // 最小数  

form.controls.name.errors.maxlength // 最大数

当然,除了通过form的模板变量来访问其内的表单元素,我们也可以为其内的表单元素定义自己的模板变量。 我们修改一下input[name=sex]

<div>   

  <label> 

     性别:   

     <select [(ngModel)]="sex" name="sex" required #sexInput="ngModel">   

       <option value="man">男</option>   

       <option value="female">女</option>   

     </select>   

  </label>   

  <p *ngIf="sexInput.invalid" class="error">不合法</p>   

  <p *ngIf="sexInput.errors?.required"></p>   

</div>

在上面的代码中,我们通过#sexInput="ngModel"来获取到当前input的FormControl

添加CSS样式

基于表单验证,我们还可以添加对应的样式来高亮一些提示:


比如当input等表单不合法时:

input.ng-invalid {   

  border: 1px solid red;  

}


如发现任何问题或有好的建议,欢迎在下方评论留言。



关注”全栈技术杂货铺“

全栈技术杂货铺