要在HTML中检索所有表单控件的值,可以使用form.getRawValue()
方法来获取表单的原始值。以下是一个解决方法的代码示例:
在组件的HTML模板中,使用form.getRawValue()
方法来检索表单的原始值:
表单值: {{ formValues | json }}
在组件的typescript文件中,创建一个方法来获取表单的原始值并将其赋值给formValues
变量:
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myForm: FormGroup;
formValues: any;
constructor() {
this.myForm = new FormGroup({
name: new FormControl(''),
email: new FormControl('')
});
}
getFormValues() {
this.formValues = this.myForm.getRawValue();
}
}
这样,当点击"获取表单值"按钮时,formValues
变量将包含表单的原始值,并在HTML中显示出来。