今天完成的事情：了解了响应式表单，完成了富文本编辑器
明天计划的事情：完成响应式表单
收获：
响应式表单
在需要使用的模块里引入表单模块
import { ReactiveFormsModule } from '@angular/forms';
imports: [
ReactiveFormsModule
]
然后在需要使用的组件里导入 FormControl 类并创建一个 FormControl 的实例
import { FormControl } from '@angular/forms';
abcd = new FormControl('');
在组件类中创建了控件之后，把它和模板中的一个表单控件关联起来
<input type="text" [formControl]="abcd">
这样表单控件和 DOM 元素就互相通讯了，类似于
<input type="text" [(ngModel)]="title">
可以插值来显示当前值
<p>{{ abcd.value }} </p>
并且可以通过setValue（）方法来修改控件的值
updateName() {
this.abcd.setValue('Nancy');
}
表单中通常会包含几个相互关联的控件。响应式表单可以把多个相关控件分组到同一个输入表单中的方法
在需要使用的组件里导入 FormGroup 和 FormControl 类。
import { FormGroup , FormControl } from '@angular/forms';
profileForm = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
});
<form [formGroup]="profileForm">
<label>First Name:<input type="text" formControlName="firstName"></label>
<label>Last Name:<input type="text" formControlName="lastName"></label>
</form>
FormGroup 指令会监听 form 元素发出的 submit 事件，并发出一个 ngSubmit 事件，让你可以绑定一个回调函数。
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
这个事情会在点击form表单内type为submit的按钮时发生
创建嵌套的表单组
profileForm = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
address: new FormGroup({
street: new FormControl(''),
city: new FormControl(''),
state: new FormControl(''),
zip: new FormControl('')
})
});
在表单组里可以这样修改值
this.profileForm.patchValue({
firstName: 'Nancy',
address: {
street: '123 Drew Street'
}
});
创建多个表单时会很繁琐，可以使用FormBuilder服务来生成
import { FormBuilder } from '@angular/forms';
constructor(private fb: FormBuilder) { }
profileForm = this.fb.group({
firstName: [''],
lastName: [''],
address: this.fb.group({
street: [''],
city: [''],
state: [''],
zip: ['']
}),
});
创建的这个就和上面那个一样
返回列表
评论