綁定來自 mat-select 表單的選定值以傳遞給提交按鈕功能

Question

參考德國人的回答更新

我正在嘗試將用戶選擇的儀器值中的 instrumentName 字段傳遞給提交按鈕中的函數。 instrumentName 值正確顯示，但它似乎從未在提交時保存。 所有其他輸入值保存良好。 我怎樣才能解決這個問題？

HTML：

      <form [formGroup]="createForm" class="create-form">

        </mat-form-field -->
        <mat-form-field class="field-full-width">
            <mat-label>Instrument</mat-label>
            <mat-select matInput formControlName="createForm.get('Machine_ID')" #Machine_ID>
                <mat-option *ngFor="let instrument of instruments" [value]="instrument.instrumentName">
                    {{instrument.instrumentName}}
                  </mat-option>
            </mat-select>
        </mat-form-field>
        <button mat-raised-button color="accent" routerLink="/list">Back</button>&nbsp;
        <button  (click)="addSample()"
          [disabled]="createForm.invalid"  color="primary">Save</button>
      </form>

代碼：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { FileService } from '../../file.service';
import { Instrument } from '../../instrument.model';
@Component({
  selector: 'app-add-new-sample',
  templateUrl: './add-new-sample.component.html',
  styleUrls: ['./add-new-sample.component.css']
})
export class AddNewSampleComponent implements OnInit {
  createForm: FormGroup;
  instruments: Instrument[];
  constructor(private fileService: FileService, private fb: FormBuilder, private router: Router) {
    this.createForm = this.fb.group({

      Machine_ID: '',

    });

    }
    addSample() {
      const machineIdValue = this.createForm.get('Machine_ID').value;
      this.fileService.addSample(machineIdValue).subscribe(() => {
        this.router.navigate(['/instruments']);
      });
    }
    fetchInstruments(){
      this.fileService.getInstruments()
      .subscribe((data: Instrument[])=>
      {
        this.instruments = data;

      })
    }
  ngOnInit() {
    this.fetchInstruments();
  }

}

Answer 1

您不需要通過模板傳遞 Machine_ID 引用。 您可以撥打formGroup並獲得Machine_ID formControl值是這樣的：

this.createForm.get('Machine_ID').value

所以在addSample你可以這樣做：

addSample(/*other inputs*/) {
  const machineIdValue = this.createForm.get('Machine_ID').value;
  this.fileService.addSample(/*other inputs*/, machineIdValue).subscribe(() => {
    this.router.navigate(['/instruments']);
  });
}

然后你應該更新你的提交按鈕：

<form [formGroup]="createForm" class="create-form">
    <mat-form-field class="field-full-width">
            <mat-label>Instrument</mat-label>
            <mat-select matInput formControlName="createForm.get('Machine_ID')" #Machine_ID>
                <mat-option *ngFor="let instrument of instruments" [value]="instrument.instrumentName">
                    {{instrument.instrumentName}}
                  </mat-option>
            </mat-select>
        </mat-form-field>
</form>
<button (click)="addSample()"
          [disabled]="createForm.invalid" mat-raised-button color="primary">Save</button>