Angular 表单1--响应式表单
时间:2022-06-18
本文章向大家介绍Angular 表单1--响应式表单,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Angular 提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单。 本节先讲响应式表单。 最终实例demo app-component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { UserService, User } from './user.service';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
form: FormGroup;
user$: Observable<User>;
constructor(
private formBuilder: FormBuilder,
private userService: UserService) { }
ngOnInit() {
this.form = this.formBuilder.group({
firstName: ['Jack', Validators.required],
lastName: ['Jones', Validators.required],
about: []
});
}
submit() {
if (this.form.valid) {
console.log(this.form.value);
}
}
}
app-component.html
<form [formGroup]="form" (ngSubmit)="submit()">
<label for="firstname">First Name</label>
<input id="firstname" formControlName="firstName" />
<div *ngIf="form.controls.firstName.errors?.required && form.controls.firstName.touched" class="error">
*Required
</div>
<label for="lastname">Last Name</label>
<input id="lastname" formControlName="lastName" />
<div *ngIf="form.controls.lastName.errors?.required && form.controls.lastName.touched" class="error">
*Required
</div>
<label for="about">About</label>
<textarea id="about" formControlName="about"></textarea>
<button [disabled]="!form.valid">Save Profile</button>
</form>
需要注意的几点:
- 使用响应式表单,需要组件所在的module引入ReactiveFormsModule 该module提供了很多指令。比如已Accessor结尾的,如
NumberValueAccessor
是专门处理<input type=number>,RadioControlValueAccessor
处理 <input type=radio>等等。 - 模板中表单元素需要绑定FormControlName属性与TS中定义的FormControl匹配。 TS中的定义表单可以使用FormControl,如果嫌麻烦,有更简便的FormBuilder.group
this.personForm = this.formBuilder.group({
username: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
age: ['', Validators.required],
...
});
// 也可以写成
this.personForm = new FormGroup({
username: new FormControl('', Validators.required),
email: new FormControl('', Validators.required),
});
- 表单元素上面不要同时出现formControlName和ngModel
如
<input formControlName="first" [(ngModel)]="value">
。使用formControlName
实际已经隐含绑定了ngModel。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- keras的三种模型实现与区别说明
- PHP智能识别收货地址信息实例
- Keras 在fit_generator训练方式中加入图像random_crop操作
- PHP面向对象程序设计继承用法简单示例
- php根据命令行参数生成配置文件详解
- PHP使用SOAP调用API操作示例
- 使用Zookeeper分布式部署PHP应用程序
- pytorch判断是否cuda 判断变量类型方式
- Keras搭建自编码器操作
- python程序如何进行保存
- Android Q之气泡弹窗的实现示例
- Python with语句用法原理详解
- pytorch 计算ConvTranspose1d输出特征大小方式
- Keras中 ImageDataGenerator函数的参数用法
- CI框架网页缓存简单用法分析