下面是一个在Angular 9中使用响应式表单的示例,演示如何移除最后一个控件并获取表单的有效性。
在组件的HTML模板中,我们创建了一个响应式表单,并添加了一些表单控件:
在组件的TypeScript代码中,我们需要导入一些必要的模块和类,并定义一个FormGroup和一个FormArray:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
items: this.fb.array([
this.fb.control('')
])
});
}
get items() {
return this.myForm.get('items') as FormArray;
}
removeLastControl() {
this.items.removeAt(this.items.length - 1);
console.log(this.myForm.valid); // 打印表单的有效性
}
}
在上面的代码中,我们使用FormBuilder创建了一个FormGroup,并在items字段上创建了一个FormArray。在removeLastControl方法中,我们使用removeAt方法从items中移除了最后一个控件,并通过myForm的valid属性获取表单的有效性。
请注意,为了在组件中使用响应式表单,我们需要在模块中导入ReactiveFormsModule:
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
ReactiveFormsModule
],
declarations: [MyComponentComponent]
})
export class MyModule { }
这是一个简单的示例,演示了如何在Angular 9中使用响应式表单移除最后一个控件并获取表单的有效性。