Angular13-如何在没有按钮点击的情况下打开表单
- 在组件的构造函数中定义一个FormGroup，并将其赋值给组件的表单变量。例如：
import { Component } from '@angular/core'; import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-my-form',
template:
})
export class MyFormComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) { this.myForm = this.fb.group({ name: [''], email: [''] }); } }
- 通过ViewChild装饰器来获取所有的FormControl元素，然后使用Renderer2来设置焦点以打开表单。例如：
import { Component, ViewChild, Renderer2 } from '@angular/core'; import { FormControl } from '@angular/forms';
@Component({
selector: 'app-my-form',
template:
})
export class MyFormComponent {
@ViewChild('nameInput') nameInput;
constructor(private renderer: Renderer2) {}
ngAfterViewInit() { this.renderer.selectRootElement(this.nameInput.nativeElement).focus(); }
get myFormControl(): FormControl { return this.myForm.get('name') as FormControl; } }
用上述方法，可以实现在不需要按钮的情况下，在页面加载时自动打开表单。