精华内容
下载资源
问答
  • 响应式表单

    2018-11-12 10:13:28
    首先,要用到响应式表单,则需要在AppModule中手动引入,代码如下:   响应式表单中有三个类,用这几个类在ts文件中写好数据模型,再通过其中的指令把模型和布局文件关联上:   区分两种表单: 看指令,...

    首先,要用到响应式表单,则需要在AppModule中手动引入,代码如下:

     

    响应式表单中有三个类,用这几个类在ts文件中写好数据模型,再通过其中的指令把模型和布局文件关联上:

     

    区分两种表单:

    看指令,若是form开头的指令是响应式表单,若是以ng开头的指令是模板式表单。

    且只有模板式表单中可以用模板本地变量(#name形式)

    注意:

    上图的指令中以name结尾的指令,在模板中进行属性绑定时,不用[ ]这样的形式,直接:formControlName = “angular haha”这样的形式即可。其他的指令则进行属性绑定时则需用[formControl] = "hahah"这样的形式。

    展开全文
  • Angular实现响应式表单

    2020-12-07 09:21:02
    Angular 总共提供了 3 中表单实现方式,分别是:Template-driven Forms (模板驱动表单) 、 Reactive Forms (响应式表单) 、 Dynamic Forms (动态表单) 。本文只介绍响应式表单响应式表单是什么呢?其实跟...
  • 响应式表单是一项响应式风格的ng2技术,本文将解释响应式表单并用来创建一个英雄详情编辑器。 包含内容: 响应式表单介绍 开始搭建 创建数据模型 创建响应式的表单组件 创建组建的模板文件 引入...
  • css3响应式表单制作留言表单提交代码
  • 解压密码:RJ4587 之前我们利用CSS3自定义Checkbox和自定义Radiobox,这次要分享的一款CSS3响应式表单不仅美化了checkbox和Radiobox,而且也自定义美化了输入框、下拉框以及多项选择框,几乎所有的表单元素都美化了...
  • Angular 的响应式表单

    2017-08-03 22:54:47
    摘要:本文简单介绍 Angular 的响应式表单,还是以之前的评论模块为例 介绍Angular 总共提供了 3 中表单实现方式,分别是:Template-driven Forms (模板驱动表单)、 Reactive Forms (响应式表单)、Dynamic Forms...

    个人博客原文:Angular 的响应式表单

    摘要:本文简单介绍 Angular 的响应式表单,还是以之前的评论模块为例

    介绍

    Angular 总共提供了 3 中表单实现方式,分别是:Template-driven Forms (模板驱动表单)Reactive Forms (响应式表单)Dynamic Forms (动态表单)。本文只介绍响应式表单。

    响应式表单是什么呢?其实跟我们以前用 JQuery 或者其他框架实现的思路差不多,就是使用 HTML 显示数据,然后通过定义一定的校验器、校验规则以及校验提示语,通过事件触发校验后校验不通过的显示提示语,只不过用了 Angular,我们就使用 Angular 提供的语法来实现这个校验过程。

    使用

    接下来我们通过代码例子来介绍如何使用响应式表单。

    引入响应式表单模块

    在我们要使用响应式表单的那个模块里面引入响应式表单模块,比如我们在文章模块中使用响应式表单,我们就要在 imports 中添加 ReactiveFormsModule。代码如下

    @NgModule({
      imports: [
        RouterModule,
        RouterModule.forChild(articleRoutes),
        SharedModule,
        ReactiveFormsModule,
        NgbModule.forRoot()
      ],
      declarations: [
        HomeComponent,
        DetailComponent,
        CommentComponent,
        CommentViewComponent
      ],
      providers: [
        HomeService,
        DetailService,
        CommentService
      ]
    })
    export class ArticleModule { }

    编写校验器代码

    首先我们这里的表单有 3 个字段,分别是 nickname、email、content; nickname 添加必填校验器,email 添加必填和邮箱格式校验器,content添加必填校验器。

    首先在 CommentComponent 中注入 FormBuilder 对象,并添加 commentForm 表单组以及创建一个评论对象 comment。

    public commentForm: FormGroup;
    public comment: Comment = new Comment();
    
    constructor(private formBuilder: FormBuilder){}

    定义校验器的提示语 validationMessages, formErrors 是在模板中显示的提示语,提示语来自 validationMessages

    public formErrors = {
      "nickname": "",
      "email": "",
      "content": "",
      "formError": ""
    }
    
    public validationMessages = {
      "nickname": {
        "required": "昵称不能为空",
      },
      "email": {
        "required": "邮箱不能为空",
        "pattern": "请输入正确的邮箱地址"
      },
      "content": {
        "required": "内容不能为空"
      }
    }

    在组件启动的函数中构造表单,这时候为每个字段添加了校验器,并且绑定在什么时候触发校验,这里我们在每个值改变的时候触发。

    ngOnInit(): void {
      this.buildForm();
    }
    
    private buildForm() {
      this.commentForm = this.formBuilder.group({
        "nickname":[
          this.comment.nickname,
          [
            Validators.required
          ]
        ],
        "email": [
          this.comment.email,
          [
            Validators.required,
            Validators.pattern("^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$")
          ]
        ],
        "content": [
          this.comment.content,
          [
            Validators.required
          ]
        ]
      });
      this.commentForm.valueChanges.subscribe(data => this.onValueChanged(data));
      this.onValueChanged();
    }

    onValueChanged() 方法实现了判断是那个字段校验不通过,然后将该字段的 validationMessages 提示语赋值给 formErrors,在模板那里有判断如果 formErrors.email 等等字段不为空则显示改内容,也即是校验器的提示语

      onValueChanged(data?: any) {
        if (!this.commentForm) {
          return;
        }
        const form = this.commentForm;
        for (const field in this.formErrors) {
          this.formErrors[field] = '';
          const control = form.get(field);
          if (control && control.dirty && !control.valid) {
            const messages = this.validationMessages[field];
            for (const key in control.errors) {
              this.formErrors[field] += messages[key] + ' ';
            }
          }
        }
    
      }

    HTML 模板代码

    我们要关注的是 [formGroup]=”commentForm”、novalidate、formControlName=”nickname”、以及 *ngIf=”formErrors.nickname” 这几个点,并不是指具体的点,而是着重看这些语法的每一个地方,在你自己实现的时候需要根据你的代码修改的。
    还有一个是 (ngSubmit)=”sendComment()” 定义了该表单点击提交时调用的函数。

    <form [formGroup]="commentForm" (ngSubmit)="sendComment()" role="form" novalidate>
      <div class="control-group">
        <div class="form-group floating-label-form-group controls" [ngClass]="{'has-error': formErrors.nickname}">
          <label>{{ 'comment.nickname' | translate }}</label>
          <input formControlName="nickname" type="text" class="form-control" placeholder="{{ 'comment.nickname' | translate }}">
          <p *ngIf="formErrors.nickname" class="help-block text-danger">
            {{ formErrors.nickname }}
          </p>
        </div>
      </div>
      <div class="control-group" >
        <div class="form-group floating-label-form-group controls" [ngClass]="{'has-error': formErrors.email}">
          <label>{{ 'comment.email' | translate }}</label>
          <input formControlName="email" type="email"   class="form-control" placeholder="{{ 'comment.email' | translate }}">
          <p *ngIf="formErrors.email" class="help-block text-danger">
            {{ formErrors.email }}
          </p>
        </div>
      </div>
      <div class="control-group">
        <div class="form-group floating-label-form-group controls"  [ngClass]="{'has-error': formErrors.content}">
          <label>{{ 'comment.content' | translate }}</label>
          <textarea formControlName="content" rows="5" class="form-control" placeholder="{{ 'comment.content' | translate }}"></textarea>
          <p *ngIf="formErrors.content"  class="help-block text-danger">
            {{ formErrors.content }}
          </p>
        </div>
      </div>
      <p *ngIf="formErrors.formError"  class="help-block text-danger">
        {{ formErrors.formError }}
      </p>
      <br>
      <div id="success"></div>
      <div class="form-group">
        <button [disabled]="commentForm.invalid" type="submit" class="btn btn-secondary" >{{ 'comment.submit' | translate }}</button>
      </div>
    </form>

    GitHub 代码

    James-Blog 中的 comment.component.ts 文件

    参考文章

    Reactive Forms

    效果图

    angular-reactive-forms.png

    展开全文
  • 主要介绍了angular6的响应式表单的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Angular-Forms 模板驱动表单、响应式表单、动态表单、表单验证
  • angular8响应式表单,表单验证,异步验证 响应式表单 Angular 提供了两种不同的方式来创建表单处理用户输入:响应式表单和模板驱动表单。 响应式表单和模板驱动表单共享了一些底层构造块。 FormControl 实例用于追踪...

    angular8响应式表单,表单验证,异步验证

    响应式表单

    Angular 提供了两种不同的方式来创建表单处理用户输入:响应式表单模板驱动表单
    响应式表单和模板驱动表单共享了一些底层构造块。

    • FormControl 实例用于追踪单个表单控件的值和验证状态。
    • FormGroup 用于追踪一个表单控件组的值和状态。
    • FormArray 用于追踪表单控件数组的值和状态。

    要使用响应式表单,首先要把 ReactiveFormsModule 添加到你的 NgModule 的 imports 数组中。
    然后就可以在组件中使用FormControl ,FormGroup,FormArray 创建表单了。
    手动创建多个表单控件实例会非常繁琐。FormBuilder 服务提供了一些便捷方法来生成表单控件。
    FormBuilder 服务有三个方法:control()、group() 和 array()。这些方法都是工厂方法,用于在组件类中分别生成 FormControl、FormGroup 和 FormArray。

    表单验证

    • 内置验证器
      Validators类中定义了11个内置验证器
    验证器方法使用说明
    min()此验证器要求控件的值大于或等于指定的数字。 它只有函数形式,没有指令形式。
    max()此验证器要求控件的值小于等于指定的数字。 它只有函数形式,没有指令形式。
    required()此验证器要求控件具有非空值。
    requiredTrue()此验证器要求控件的值为真。它通常用来验证检查框。
    email()此验证器要求控件的值能通过 email 格式验证。
    minLength()此验证器要求控件值的长度大于等于所指定的最小长度。当使用 HTML5 的 minlength 属性时,此验证器也会生效。
    maxLength()此验证器要求控件值的长度小于等于所指定的最大长度。当使用 HTML5 的 maxlength 属性时,此验证器也会生效。
    pattern()此验证器要求控件的值匹配某个正则表达式。当使用 HTML5 的 pattern 属性时,它也会生效。
    nullValidator()此验证器什么也不做。
    compose()把多个验证器合并成一个函数,它会返回指定控件的各个错误映射表的并集。
    composeAsync()把多个异步验证器合并成一个函数,它会返回指定控件的各个错误映射表的并集。
    • 自定义验证器
      regularExpressionValidator(regular: RegExp): ValidatorFn {
        return (control: AbstractControl): { [key: string]: any } | null => {
          const forbidden = !control.value || regular.test(control.value);
          return forbidden ? null : { forbiddenName: { value: control.value } };
        };
      }
    
    • 自定义异步验证器
      asyncValidator() {
        return (ctrl: AbstractControl): Promise<ValidationErrors | null>| Observable<ValidationErrors | null> => {
          return new Promise(resolve => {
            const accountList = ['qaz', 'wsx', 'edc'];
            setTimeout(() => {
              if (accountList.includes(ctrl.value)) {
                resolve({ msg: `${ctrl.value}已经被占用` });
              } else {
                resolve(null);
              }
            }, 2000);
          });
        };
      }
    

    自定义验证器都返回一个AbstractControl实例作为参数的函数,其中同步验证器返回{}或null分别表示验证不通过和通过;异步验证器返回Promise或Obzervable对象,回调中的值为null时表示验证通过。

    示例

    • ReactiveComponent
    import { Component, OnInit } from '@angular/core';
    import {
      FormGroup,
      FormControl,
      FormBuilder,
      Validators,
      ValidatorFn,
      AbstractControl,
      ValidationErrors
    } from '@angular/forms';
    import { Observable } from 'rxjs';
    @Component({
      selector: 'app-reactive',
      templateUrl: './reactive.component.html',
      styleUrls: ['./reactive.component.sass']
    })
    export class ReactiveComponent implements OnInit {
      constructor(private fb: FormBuilder) {
        console.log(111, this.profileForm);
      }
      // 获取控件AbstractControl对象
      get firstName() {
        return this.userForm.get('firstName');
      }
      get lastName() {
        return this.userForm.get('lastName');
      }
      get account() {
        return this.userForm.get('account');
      }
      // FormGroup生成控件组,FormControl生成控件对象
      profileForm = new FormGroup({
        firstName: new FormControl(''),
        lastName: new FormControl('')
      });
      // 使用FormBuilder创建表单数据
      // 有三个方法:control()、group() 和 array()。这些方法都是工厂方法,用于在组件类中分别生成 FormControl、FormGroup 和 FormArray
      userForm = this.fb.group({
        firstName: ['', Validators.required],
        lastName: ['', this.regularExpressionValidator(/^1[3456789]\d{9}$/)],
        account: [
          '',
          {
            validators: Validators.required,
            asyncValidators: this.asyncValidator(),
            updateOn: 'blur'
          }
          // this.asyncValidator()
        ]
      });
      // 异步验证器
      asyncValidator() {
        return (
          ctrl: AbstractControl
        ):
          | Promise<ValidationErrors | null>
          | Observable<ValidationErrors | null> => {
          return new Promise(resolve => {
            const accountList = ['qaz', 'wsx', 'edc'];
            setTimeout(() => {
              if (accountList.includes(ctrl.value)) {
                resolve({ msg: `${ctrl.value}已经被占用` });
              } else {
                resolve(null);
              }
            }, 2000);
          });
        };
      }
      // 验证器
      regularExpressionValidator(regular: RegExp): ValidatorFn {
        return (control: AbstractControl): { [key: string]: any } | null => {
          const forbidden = !control.value || regular.test(control.value);
          return forbidden ? null : { forbiddenName: { value: control.value } };
        };
      }
    
      ngOnInit() {}
      setFormData() {
        // this.profileForm.firstName.setValue('Nancy');
        console.log(this.profileForm);
        // 参数必须和form对象一致
        this.profileForm.setValue({ firstName: 'firstName', lastName: 'lastName' });
      }
      patchValue() {
        // 部分模型更新
        this.profileForm.patchValue({ firstName: 'firstName1' });
      }
      consoleForm() {
        console.log(this.userForm);
      }
    }
    
    
    • html代码
    <div class="container">
      <h1>Reactive Form</h1>
      <form [formGroup]="profileForm">
        <label>
          First Name:
          <input type="text" formControlName="firstName">
        </label>
    
        <label>
          Last Name:
          <input type="text" formControlName="lastName">
        </label>
      </form>
    
      <p>
        <button (click)="setFormData()">设置表单数据setValue</button>
      </p>
      <p>
        <button (click)="patchValue()">设置表单数据patchValue</button>
      </p>
      <p>userForm!</p>
      <form [formGroup]="userForm">
        <div class="cross-validation" [class.cross-validation-error]="
            userForm.errors?.identityRevealed &&
            (userForm.touched || userForm.dirty)
          ">
          <div class="form-group">
            <label> First Name:</label>
            <input class="form-control" type="text" formControlName="firstName" required>
            <div class="alert alert-danger" *ngIf="firstName.invalid && (firstName.dirty || firstName.touched)">
    
              <div *ngIf="firstName.errors.required">
                Name is required.
              </div>
              <!-- <div *ngIf="name.errors.minlength">
                  Name must be at least 4 characters long.
                </div> -->
              <!-- <div *ngIf="name.errors.forbiddenName">
                  Name cannot be Bob.
                </div> -->
            </div>
          </div>
          <div class="form-group">
            <label> Last Name:</label>
            <input class="form-control" type="text" formControlName="lastName">
            <div class="alert alert-danger alter-ego-errors" *ngIf="lastName.invalid">
              <div *ngIf="lastName.errors.forbiddenName">
                手机号码有误,请重填.
              </div>
            </div>
          </div>
          <div class="form-group">
            <label> account:</label>
            <input class="form-control" type="text" formControlName="account">
            <div *ngIf="account.pending">Validating...</div>
            <div class="alert alert-danger alter-ego-errors" *ngIf="account.invalid && (account.dirty || account.touched)">
              <div *ngIf="account.errors.required">
                account is required.
              </div>
              <div *ngIf="account.errors.msg">
                {{account.errors.msg}}
              </div>
            </div>
          </div>
        </div>
        <p>Form Status: {{ userForm.status }}</p>
        <p>Form Status: {{ userForm.value | json }}</p>
        <button class="btn btn-default" (click)="consoleForm()">Submit</button>
      </form>
    </div>
    
    展开全文
  • 上图左边是模板式表单中的指令,右图是对应的响应式表单的类。一 一对应。     如何在布局文件中区分是哪种表单? 看指令,若是form开头的指令是响应式表单,若是以ng开头的指令是模板式表单。 且只有模板式...

     

     

     

    上图左边是模板式表单中的指令,右图是对应的响应式表单的类。一 一对应。

     

     

    如何在布局文件中区分是哪种表单?

    看指令,若是form开头的指令是响应式表单,若是以ng开头的指令是模板式表单。

    且只有模板式表单中可以用模板本地变量(#name形式)

    展开全文
  • 1. 模板式表单和响应式表单的不同点
  • angular4表单-响应式表单

    千次阅读 2017-11-29 14:35:07
    angular4中响应式表单的创建以及表单验证,包括angular4中select属性显示默认项的实现方法。
  • 时隔十多天我(独臂侠 灰常怀念两只胳膊~~(><)~~)又来了,之前是第三章的内容,今天先写*第七章表单处理*的内容吧,涉及Angular4的模板式表单、响应式表单、表单状态字段的内容
  • ngxErrors 一个用于响应式表单的声明式验证错误模块
  • 主要给大家详细解析了关于Angular中响应式表单的三种更新值方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。
  • Angular2响应式表单

    2017-05-03 21:54:04
    响应式表单是一项响应式风格的ng2技术,本文将解释响应式表单并用来创建一个英雄详情编辑器。 包含内容: 响应式表单介绍开始搭建创建数据模型创建响应式的表单组件创建组建的模板文件引入ReactiveFormsModul
  • Angular v4.1.1 - 响应式表单、可观测、组件架构
  • 这是一款使用html5表单验证新属性制作的HTML5超酷响应式表单美化模板插件。该html5表单美化插件可以使用html5新特性栏验证表单,表单整体效果趋于扁平化风格,非常好看。
  • angular7+ngzorro响应式表单验证

    千次阅读 2019-07-03 11:41:46
    使用响应式表单在开发的过程中,经常会用到。使用响应式表单的不仅能够提高开发效率,并且还能有效减少冗余的代码,在表单校验的时候也更方面,并且结合ngzorro进行表单校验效果更完美。 ...
  • angular6的响应式表单

    千次阅读 2018-10-09 16:45:13
    要使用响应式表单,就要从@angular/forms包中导入ReactiveFormsModule,并把它添加到你的NgModule的imports数组中。 import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ imports: [ ...
  • 普通表单与响应式表单的对比

    千次阅读 2017-07-14 09:57:08
    一、模板驱动表单 1、在用angular-cli脚手架创建项目的时候就会在app.module.ts文件中自动加入FormsModule模块 2、FormsModule就是模板驱动表单的,为我们提供了两个指令 ...2、响应式表单为我们提供了两个指令
  • jquery登录注册忘记密码响应式表单验证特效html模板
  • Ideal Forms响应式表单

    2015-12-17 20:38:24
    Ideal Forms响应式表单 这是一款很小的,算不上框架的,仅仅是form表单的美化和验证,简单学一学,对于快速开发出友好交互的表单还是很好的 l 要点1::相关了解 GitHub项目网址:...
  • angular7中响应式表单校验

    千次阅读 2019-07-03 11:39:24
    响应式表单校验(angular自带校验和自定义校验规则) import { Component, OnInit } from '@angular/core'; import { FormBuilder, Validators, FormControl, FormGroup } from '@angular/forms'; import { fbind } ...
  • 建立特斯拉电池范围计算器利用 Angular 2 响应式表单

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 59,400
精华内容 23,760
关键字:

响应式表单