要在Angular 6的材料表格中添加行(表单字段)并使用上次输入的值,您可以使用Angular表单和材料表格组件的组合。下面是一个示例解决方案:
首先,您需要在app.module.ts
中导入所需的模块:
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [],
imports: [
FormsModule,
ReactiveFormsModule,
MatTableModule,
MatInputModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: []
})
export class AppModule { }
接下来,您需要在组件中定义一个表单模型和一个表格数据数组:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export interface UserData {
name: string;
age: number;
email: string;
}
@Component({
selector: 'app-root',
template: `
姓名
{{ user.name }}
年龄
{{ user.age }}
电子邮件
{{ user.email }}
`
})
export class AppComponent {
userForm: FormGroup;
dataSource: UserData[] = [];
displayedColumns: string[] = ['name', 'age', 'email'];
constructor(private fb: FormBuilder) {
this.userForm = this.fb.group({
name: ['', Validators.required],
age: ['', Validators.required],
email: ['', Validators.required]
});
}
addRow() {
if (this.userForm.valid) {
this.dataSource.push(this.userForm.value);
this.userForm.reset();
}
}
}
在这个示例中,AppComponent
定义了一个名为userForm
的表单模型,以及一个名为dataSource
的表格数据数组。addRow()
方法将表单的值添加到dataSource
数组中,并将表单重置为初始状态。
最后,将AppComponent
添加到app.component.html
中的
标记中:
这样,当用户在表单中输入值并点击"添加"按钮时,它将会添加到表格中,并且表单将被重置。
请确保您已经安装了@angular/material
和@angular/cdk
依赖项,并在angular.json
文件中正确引入了材料主题CSS文件。
这是一个基本示例,你可以根据你的需求进行修改和扩展。