[英]How to Pass Form Group Data to Submit Button in Another Component (Angular 7)
我在将表单组数据传递给 saveDialog() function 时遇到问题,它会更新提交按钮上的表单数据。
我将如何在 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
您将获得带有输入数据的 Object。
您的问题不是很清楚,但是如果您想将数据(例如 FormGroup)从一个组件传递到另一个组件,则存在许多技术。
I recommend you to read this great article from Jeff Delaney explaining the different way to sharing Data between Angular Components ( Fireship.io - Sharing Data between Angular Components ) and this one Fireship.io - Angular Reactive Forms Basics Guide explaining how works reactive forms and如何使用它们。
再会 !
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.