从Angular设置表单组数据的方法有多种。下面是一种常见的方法:
FormGroup
或FormBuilder
来创建。例如:import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.myForm = this.formBuilder.group({
firstName: '',
lastName: '',
email: ''
});
}
}
<form [formGroup]="myForm">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" formControlName="firstName">
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" formControlName="lastName">
<label for="email">Email:</label>
<input type="email" id="email" formControlName="email">
</form>
setValue
或patchValue
方法。setValue
要求提供表单组的完整数据,而patchValue
可以只提供部分数据。例如:this.myForm.setValue({
firstName: 'John',
lastName: 'Doe',
email: 'john.doe@example.com'
});
或者
this.myForm.patchValue({
firstName: 'John',
lastName: 'Doe'
});
云+社区技术沙龙[第10期]
腾讯技术开放日
2019腾讯云华北区互联网高峰论坛
小程序云开发官方直播课(应用开发实战)
实战低代码公开课直播专栏
云+社区技术沙龙[第5期]
腾讯云GAME-TECH沙龙
算法大赛
云+社区技术沙龙[第28期]
领取专属 10元无门槛券
手把手带您无忧上云