javascript - 如何将表单组数据传递给另一个组件中的提交按钮(Angular 7)
问题描述
我在将表单组数据传递给 saveDialog() 函数时遇到问题,该函数会更新提交按钮上的表单数据。
我将如何在 Angular 7 中做到这一点?我正在尝试将每个表单组的所有组件分开,并使用一个按钮一起提交/更新?
修改-view-action.component.html
<form [formGroup]="modifyActionForm" (ngSubmit)="saveDialog()">
<div class="container" fxLayout="row" fxLayoutGap="25px">
<div class="column1" fxLayout="column">
<mat-form-field>
<mat-label>Name</mat-label>
<input matInput>
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
</mat-form-field>
<mat-form-field>
<mat-label>Keyword</mat-label>
<input matInput>
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
</mat-form-field>
<mat-form-field>
<mat-label>Description</mat-label>
<input matInput>
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
</mat-form-field>
<mat-form-field>
<mat-label>Icon</mat-label>
<input matInput>
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
</mat-form-field>
<mat-form-field>
<mat-label>Priority</mat-label>
<input matInput>
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
</mat-form-field>
</div>
</form>
修改视图action.component.ts
export class ModifyViewActionComponent implements OnInit {
modifyActionForm: FormGroup;
dbrAction: any;
constructor() { }
ngOnInit() {
this.initData();
}
initData() {
this.dbrAction = JSON.parse(localStorage.getItem('DbrAction'));
}
}
解决方案
首先,为了从FormGroup中获取数据,您需要在要从中获取数据的每个输入上添加formControlName 。像那样 :
<mat-form-field>
<mat-label>Name</mat-label>
<input matInput formControlName="name">
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
</mat-form-field>
您还需要在 .ts 文件中声明每个控制器的FormGroup 。像那样 :
modifyActionForm = new FormGroup({
name : new FormControl(),
keyword: new FormControl(),
description: new FormControl(),
// And that ⬆ for each input in your form
})
为了从此FormGroup中获取数据,您需要执行以下操作:
this.modifyActionForm.value
您将获得一个包含输入数据的对象。
您的问题不是很清楚,但是如果您想将数据(例如 FormGroup)从一个组件传递到另一个组件,则存在许多技术。
我建议您阅读Jeff Delaney的这篇精彩文章,解释在 Angular 组件之间共享数据的不同方式(Fireship.io - 在 Angular 组件之间共享数据)和这个Fireship.io - Angular Reactive Forms Basics Guide解释如何工作的响应式表单和如何使用它们。
再会 !
推荐阅读
- elasticsearch - 不同类型的弹性搜索错误映射器 [email.keyword]、current_type [text]、merged_type [keyword]
- html - Angular 8 嵌套对象插值
- java - 包 org.springframework.boot 不存在多模块项目的错误
- c++ - Visual Studio 的内存窗口只包含问号
- reactjs - 向 Recharts 中的 ReferenceLine 添加自定义标签时不显示任何组件
- javascript - 如何使用 reactJS 模拟这种 jQuery 行为:从不同的 div 中添加/删除 className
- java - 需要使用java读取一个JSON数组对象
- python - 如何使用openpyxl在python中按单元格值获取列号
- ruby-on-rails - 我的 Rails 按钮没有更新数据库
- elasticsearch - 如何将弹性搜索数据重新索引到新的映射(从平面字段到对象)?