AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Angular 2.x折腾记 ：(7) 初步了解表单：模板驱动及数据驱动及脱坑要点

2022-05-08 169
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 表单在整个系统中的作用相当重要，这里主要扯下响应表单的实现方式。首先需要操作表单的模块引入这两个模块；import { FormsModule, ReactiveFormsModule } from '@angular/forms';


前言

表单在整个系统中的作用相当重要，这里主要扯下响应表单的实现方式。


首先需要操作表单的模块引入这两个模块；


import { FormsModule, ReactiveFormsModule } from '@angular/forms';


表单控件响应的几种状态


模板驱动表单依赖FormsModule,


数据驱动的表单依赖FormsModule,ReactiveFormsModule


一般做表单校验及操作推荐用数据驱动的方式，好维护和理解。


模板驱动

模板驱动：主要是依赖[(ngModel)]和#scope_var以及原生表单控件属性(require,minlenght,maxlength等)来操作表单的那的值亦或者校验


  • 一个最简单的例子


<!--#UserName 是局部变量，若是有ngmodel,拿到的就是一个响应对象，若是非ngmodel绑定的，则是dom元素代码-->
<!--testform这个局部变量保存了表单的所有相关信息-->
<!--ngSubmit是用来触发表单提交的-->
<!--ngModel相应变量的值-->
<!--$event是原生dom对象-->
<form  #testform="ngForm"  (ngSubmit)="Submit(testform.value,testform.valid)">
<label for="username">Name</label>
<input type="text" id="username" #UserName="username" class="form-control"
    required minlength="4" maxlength="24"
    name="username" [(ngModel)]="username" [ngModelChange]="validate($event)">
<div *ngIf="UserName.valid || (UserName.pristine && !testform.submitted)">
 您输入的值有误，请重新输入
</div>
<button type="submit" >提交</button>
</form>


有两种方式处理来对上面的表单做校验；


  1. 在Submit()函数内，在点击提交的时候对整个表单一一去判断，传统方式基本这样


  1. 每个控件输入的时候对应去触发对应的事件做校验,比如[ngModelChange]来处理双向绑定的值校验


数据驱动(Reactive Form)

响应式表表单：原理是一开始就构建整个表单，表单的值通过特殊指令formControlName一一关联(类似ngModel);


相关名词：


  • FormGroup: 用来追踪表单控件有效状态及值 =》 可以理解为获取且可以操作整个表单的数据
  • FormBuilder:表单数据构建工具[构建初始表单]，简化构建代码(包括了new FormGroup(),new FormControl(),new FormArray()),FormGroup()内置多种校验方式
  • formControlName: 同步与FormGroup构建表单内相同字段的值！


项目中的案例


html


<div [@flyIn]="true">
  <div class="beautify-form" *ngIf="!showLoading">
    <div class="page-header">
      欢迎登录
    </div>
    <form [formGroup]="form" (ngSubmit)="onSubmit(form)">
      <div class="form-group" [ngClass]="{ 'has-danger': form.controls.UserName.invalid && form.controls.UserName.value ,'has-success':  form.controls.UserName.valid && form.controls.UserName.value }">
        <div class="input-group input-group-lg">
          <span class="input-group-addon fpd fpd-ordinarylogin1"></span>
          <input type="text" class="form-control" formControlName="UserName" placeholder="手机号码 \ 邮箱 ">
        </div>
        <div class="form-control-feedback" *ngIf="(form.controls.UserName.dirty || form.controls.UserName.pristine) && form.controls.UserName.invalid && form.controls.UserName.value">账号不符合规范</div>
        <div class="form-control-feedback" *ngIf="(form.controls.UserName.dirty || form.controls.UserName.pristine) && form.controls.UserName.valid && form.controls.UserName.value">账号符合规范</div>
      </div>
      <div class="form-group" [ngClass]="{ 'has-danger': form.controls.PassWord.invalid && form.controls.PassWord.value ,'has-success': form.controls.PassWord.valid && form.controls.PassWord.value }">
        <div class="input-group input-group-lg">
          <span class="input-group-addon fpd fpd-mima"></span>
          <input type="PassWord" class="form-control" formControlName="PassWord" placeholder="请输入密码">
        </div>
        <div class="form-control-feedback" *ngIf="(form.controls.PassWord.dirty || form.controls.PassWord.pristine) && form.controls.PassWord.invalid && form.controls.PassWord.value ">密码不符合规范,请重新输入</div>
        <div class="form-control-feedback" *ngIf="(form.controls.PassWord.dirty || form.controls.PassWord.pristine) && form.controls.PassWord.valid && form.controls.PassWord.value ">密码符合规范</div>
      </div>
      <div class="form-group ">
        <div class="flex">
          <div class="beautify-wrap flex-wrap">
            <input type="checkbox" class="beautify-checkbox" name="rememberme" id="rememberAccount" formControlName="rememberAccount">
            <label for="rememberAccount"></label>记住账号
          </div>
          <!--<a [routerLink]="['/account/reset-pw']">忘记密码</a>-->
        </div>
      </div>
      <div class="message-tips" *ngIf="messageTips">
        <i class="fpd fpd-error"></i> {{messageTips}}
      </div>
      <div class="form-group ">
        <button class="btn btn-lg btn-outline-success btn-block" type="submit" [disabled]="form.invalid">登录</button>
      </div>
      <div class="form-group">
        <span class="noaccount-notify">没有账号？点击</span><a [routerLink]="['/account/collect']" class="collect-user">用户登记</a>
      </div>
    </form>
  </div>
  <div class="loading" *ngIf="showLoading">
    <app-mit-loading [option]="'load4'"></app-mit-loading>
  </div>
</div>


component.ts


import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, Validators, FormBuilder } from '@angular/forms'; // 引入表单的一些特性
import { Router } from '@angular/router';
import { AccountService } from '../../services/account.service';
import { environment } from '../../../../../environments/environment';
import { flyIn } from '../../../../animation/flyIn';
import { Observable } from 'rxjs/Observable';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
  animations: [flyIn]
})
export class LoginComponent implements OnInit, OnDestroy {
  public form: FormGroup; // 表单对象
  public showLoading = false;
  public messageTips: string;
  public login_subscribe: any;
  // Validators的写法注意事项
  // v2.x版本这样的写法是可行的，v4有调整，不然不会生效
  // 'UserName':'', [ Validators.compose([Validators.minLength(6)] 
  // v4+ , 第一位的''代表这个元素初始化构建为空值,类似未输入状态
  // 'UserName': ['', Validators.compose([Validators.minLength(6)]
  // Validators可选参数
  // 1. required ：必须验证的，返回布尔值
  // 2. minLength ： 最小长度
  // 3. maxLenght: 最大长度
  // 4. nullValidator : 空值判断
  // 5. coompose :多重判断组合，下面有写法 
  // 6. pattern是支持正则模式，正则谨记转义转义转义
  constructor(private fb: FormBuilder, private router: Router, private account: AccountService) {
    this.form = fb.group({
      'UserName': ['', Validators.compose([Validators.minLength(6) || Validators.pattern('(0|86|17951)?(-)?1[3,4,5,7,8,9]\\d{9}') || Validators.pattern('[\\.a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+')])],
      'PassWord': ['', Validators.compose([Validators.required, Validators.pattern('\\w{8,16}')])],
      'rememberAccount': ['']
    });
  }
  ngOnInit() {
  }
  // 登录事件
  onSubmit(e) {
    this.showLoading = true;
    this.login_subscribe = this.account.login(e.value).subscribe((res) => {
     console.log('省略。。。。。。')
    }, (err) => {
      this.showLoading = false;
    });
  }
  ngOnDestroy() {
    if (this.login_subscribe) {
      this.login_subscribe.unsubscribe();
    }
  }
}


效果图



嵌套表单

有些时候我们接口数据层次不可能只有一层，出现两层三层都有可能,这时候需要我们构建一个嵌套表单。。。


html


  • v2-的写法：表单的取值可以用controls直接点出来


<div class="custom-card">
  <div class="custom-card-body">
    <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
      <div class="row" formGroupName="RuleContent">
        <div class="col-sm-12 col-md-12 col-lg-8  offset-lg-2">
          <div class="form-group row" [ngClass]="{ 'has-danger': form.controls.RuleContent.controls.FenceName.invalid && form.controls.RuleContent.controls.FenceName.value ,'has-success': form.controls.RuleContent.controls.FenceName.valid && form.controls.RuleContent.controls.FenceName.value }">
            <label tooltip="" class="col-sm-10 col-md-3 form-control-label col-lg-3 star">速度栅栏名称</label>
            <div class="col-sm-8 col-md-6 col-lg-6">
              <input type="text" class="form-control" formControlName="FenceName" placeholder="栅栏名称">
            </div>
            <div class="col-2 col-sm-4 col-lg-3 flex-align-center">
              不超过十个字
            </div>
          </div>
          <div class="form-group row" [ngClass]="{ 'has-danger': form.controls.RuleContent.controls.MaxSpeed.invalid && form.controls.RuleContent.controls.MaxSpeed.value ,'has-success': form.controls.RuleContent.controls.MaxSpeed.valid && form.controls.RuleContent.controls.MaxSpeed.value }">
            <label tooltip="" class="col-sm-10 col-md-3 form-control-label col-lg-3 star">速度阈值</label>
            <div class="col-sm-8 col-md-6 col-lg-6">
              <input type="number" class="form-control" min="1" formControlName="MaxSpeed" placeholder="整数">
            </div>
            <div class="col-2 col-sm-4 col-lg-3 flex-align-center">
              km/h
            </div>
          </div>
          <div class="form-group row">
            <div class="col-12 col-sm-10 col-md-6 offset-sm-2 offset-md-4 offset-lg-3">
              <button type="submit" class="btn btn-primary" [disabled]="form.invalid">保存</button>
              <button type="button" class="btn btn-secondary" (click)="back()">取消</button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>


  • v4+的写法 :嵌套表单的取值必须用.get()来获取，不然会报错误，具体原因是api改动了，看下官方文档就知道，改动了挺多(不仅仅这块)


<div class="custom-card">
  <div class="custom-card-body">
    <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
      <div class="row" formGroupName="RuleContent">
        <div class="col-sm-12 col-md-12 col-lg-8  offset-lg-2">
          <div class="form-group row" [ngClass]="{ 'has-danger': form.get('RuleContent.FenceName').invalid && form.get('RuleContent.FenceName').value ,'has-success': form.get('RuleContent.FenceName').valid && form.get('RuleContent.FenceName').value }">
            <label tooltip="" class="col-sm-10 col-md-3 form-control-label col-lg-3 star">速度栅栏名称</label>
            <div class="col-sm-8 col-md-6 col-lg-6">
              <input type="text" class="form-control" formControlName="FenceName" placeholder="栅栏名称">
            </div>
            <div class="col-2 col-sm-4 col-lg-3 flex-align-center">
              不超过十个字
            </div>
          </div>
          <div class="form-group row" [ngClass]="{ 'has-danger': form.get('RuleContent.MaxSpeed').invalid && form.get('RuleContent.MaxSpeed').value ,'has-success': form.get('RuleContent.MaxSpeed').valid && form.get('RuleContent.MaxSpeed').value }">
            <label tooltip="" class="col-sm-10 col-md-3 form-control-label col-lg-3 star">速度阈值</label>
            <div class="col-sm-8 col-md-6 col-lg-6">
              <input type="number" class="form-control" min="1" formControlName="MaxSpeed" placeholder="整数">
            </div>
            <div class="col-2 col-sm-4 col-lg-3 flex-align-center">
              km/h
            </div>
          </div>
          <div class="form-group row">
            <div class="col-12 col-sm-10 col-md-6 offset-sm-2 offset-md-4 offset-lg-3">
              <button type="submit" class="btn btn-primary" [disabled]="form.invalid">保存</button>
              <button type="button" class="btn btn-secondary" (click)="back()">取消</button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>


components.ts


import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'; // 引入表单的一些特性
// 动画
import { fadeIn } from '../../../../../animation/fadeIn';
// 服务
import { SpeedFenceService } from '../speed-fence.service';
import { EventsService } from '../../../../../services/events-service.service';
@Component({
  selector: 'app-modify',
  templateUrl: './modify.component.html',
  styleUrls: ['./modify.component.scss'],
  animations: [fadeIn]
})
export class ModifyComponent implements OnInit {
  public form: FormGroup;
  public getId: any;
  public id: number;
  constructor(
    private speedFenceService: SpeedFenceService,
    private eventsService: EventsService,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private fb: FormBuilder
  ) {
    this.form = fb.group({
      'ID': 0,
      'RuleContent': this.fb.group({
        'MaxSpeed': [0, Validators.compose([Validators.required, Validators.pattern('(([4-9][0-9])|(1[0-1][0-9])|(120))')])],
        'FenceName': ['', Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(10)])],
      })
    });
  }
  ngOnInit() {
    this.checkAction();
    // console.log(this.form);
  }
  // 获取ID
  checkAction() {
    this.activatedRoute.params.subscribe((params: { id: string }) => {
      console.log(params);
      if (params.id) {
        console.log(this.id);
        this.id = parseInt(params.id, 10);
        this.form.controls['ID'].setValue(this.id);
        this.GetSpeedFenceSettingByFenceId({ FenceId: parseInt(params.id, 10) });
      }
    });
  }
  GetSpeedFenceSettingByFenceId(data) {
    this.speedFenceService.GetSpeedFenceSettingByFenceId(data).subscribe(
      res => {
        if (res.State) {
          this.form.controls['RuleContent'].setValue({
            'MaxSpeed': res.Data.RuleContent.MaxSpeed || '',
            'FenceName': res.Data.RuleContent.FenceName || '',
          });
        }
      },
      err => { }
    );
  }
  onSubmit(form) {
    console.log('此处省略。。。。。');
  }
  // 取消
  back() {
    if (this.id) {
      this.router.navigate(['../../'], { relativeTo: this.activatedRoute });
    } else {
      this.router.navigate(['../'], { relativeTo: this.activatedRoute });
    }
  }
}


文章标签：
API
关键词：
Angular模板
Angular表单模板驱动
Angular模板驱动
Angular表单
crperx
目录
相关文章
土木林森
|
3月前
|
开发者 Java Spring
JSF 牵手社交登录，如魔法风暴席卷 Web 世界，开启震撼便捷登录之旅！
【8月更文挑战第31天】在互联网时代，便捷登录成为用户的核心需求。社交登录凭借其便捷性、安全性和社交化的特点，在各类Web应用中广泛应用。JavaServer Faces（JSF），作为一款流行的Java Web框架，能够轻松集成社交登录功能，显著提升用户体验。本文详细介绍社交登录的优势，并提供两种JSF集成社交登录的常见方法：一是利用Spring Social等第三方库简化开发；二是自行实现社交登录流程。开发者可根据项目需求选择适合的方案。
土木林森
39 0
土木林森
|
3月前
|
开发者 容器 Docker
JSF与Docker，引领容器化浪潮！让你的Web应用如虎添翼，轻松应对高并发！
【8月更文挑战第31天】在现代Web应用开发中，JSF框架因其实用性和灵活性被广泛应用。随着云计算及微服务架构的兴起，容器化技术变得日益重要，Docker作为该领域的佼佼者，为JSF应用提供了便捷的部署和管理方案。本文通过基础概念讲解及示例代码展示了如何利用Docker容器化JSF应用，帮助开发者实现高效、便携的应用部署。同时也提醒开发者注意JSF与Docker结合使用时可能遇到的限制，并根据实际情况做出合理选择。
土木林森
40 0
白如意i
|
3月前
Angular 中的响应式表单：监听变化
Angular 中的响应式表单：监听变化
白如意i
34 0
白如意i
|
3月前
|
JavaScript 前端开发
如何在 Angular 中使用响应式表单
如何在 Angular 中使用响应式表单
白如意i
18 0
白如意i
|
3月前
|
JavaScript 前端开发
如何在 Angular 中为响应式表单创建自定义验证器
如何在 Angular 中为响应式表单创建自定义验证器
白如意i
23 0
白如意i
|
3月前
|
JavaScript
如何使用 ControlValueAccessor 在 Angular 中创建自定义表单控件
如何使用 ControlValueAccessor 在 Angular 中创建自定义表单控件
白如意i
19 0
夏天49597
|
4月前
|
前端开发 JavaScript
前端框架与库 - Angular基础：组件、模板、服务
【7月更文挑战第16天】Angular，谷歌维护的前端框架，专注构建动态Web应用。组件是核心，包含行为逻辑的类、定义视图的模板和样式。模板语法含插值、属性和事件绑定。服务提供业务逻辑，依赖注入实现共享。常见问题涉及组件通信、性能和服务注入。优化通信、性能并正确管理服务范围，能提升应用效率和质量。学习组件、模板和服务基础，打造高效Angular应用。
夏天49597
63 1
游客4llb6htoixmxw
|
6月前
|
JavaScript 开发者 UED
Angular 视图数据模型变化导致重新计算模板中的表达式的技术原理
Angular 视图数据模型变化导致重新计算模板中的表达式的技术原理
游客4llb6htoixmxw
39 4
天行无忌
Angular模板简介
模板引擎是Web应用中用来生成动态HTML的一个途径， 负责将数据模型与HTML模板结合起来（即模板渲染），生成最终的HTML。 编写HTML模板的语法称为模板语法，模板语法的表达能力和可扩展性决定了模板引擎的易用性。本文将介绍在重构管理控制台中使用到的Angular的模板引擎ng-template。
天行无忌
183 0
luanpanfei
|
2月前
|
缓存 JavaScript 前端开发
Angular 应用打包和部署
Angular 应用打包和部署
luanpanfei
167 58

热门文章

最新文章

  • 1
    YY游戏云的angular js实践总结
  • 2
    angular之interceptors拦截器
  • 3
    ngCloak 实现 angular 初始化闪烁最佳实践
  • 4
    angular controller as syntax vs scope
  • 5
    Angular 怎样绑定 Html
  • 6
    使用VScode开发Angular
  • 7
    Angular 4 管道
  • 8
    掌握 Angular2 的依赖注入
  • 9
    阿里新作！阿里大佬纯手写Angular和Spring Boot全栈技能修炼手册
  • 10
    Angular module加载的原理研究
  • 1
    基于Angular的简易在线购物车设计与实现
    70
  • 2
    Angular：构建现代Web应用的终极选择
    96
  • 3
    目前最流行的一些前端框架：React、Angular、Vue.js和jQuery
    684
  • 4
    2024 年 3 月 1 日安装 Composable Storefront 2211 遇到 Angular 和 TypeScript 版本不匹配的错误
    81
  • 5
    Composable Storefront 2211 的 Angular CLI 版本
    32
  • 6
    Angular CLI 里打印出来的 TypeScript 版本号是从哪里来的
    54
  • 7
    浅谈 Angular 和 UI5 这两种前端框架里控件 ID 的设计思路差异
    53
  • 8
    探索前端开发框架：React、Angular 和 Vue 的对决(四)
    76
  • 9
    探索前端开发框架：React、Angular 和 Vue 的对决(三)
    69
  • 10
    探索前端开发框架：React、Angular 和 Vue 的对决(二)
    73

    • 相关课程

    更多
  • 阿里云RPA（机器人流程自动化）- 初级入门（可视化）
  • AngularJS 快速入门

    • 相关电子书

    更多
  • Angular从零到一
  • 圆桌讨论： 从趋势、工具或相关的技术点谈APP的优化
  • F2etest — 多浏览器兼容性测试整体解决方案

    • 相关实验场景

    更多
  • 前端开发基础2：VS Code和Edge的联动开发
  • 基于函数计算快速搭建Zblog等传统应用框架
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月