如何將表單組數據傳遞給另一個組件中的提交按鈕（Angular 7）

Question

我在將表單組數據傳遞給 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'));
  }
}

Answer 1

首先，為了從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如何使用它們。

再會 ！