如何在Angular产品表单中使用Angular Material Select关联后端水类型数据

需求说明 #

在新增产品的表单中，通过Angular Material Select选择后端水类型表的数据，并将选择结果保存到产品记录中。已定义相关数据类，但无法完成完整流程，以下是实现方案：

步骤1：完善组件TS逻辑 #

添加水类型数据获取、表单控件优化及产品赋值逻辑：

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { List_Water_Type } from './water';
import { Create_Product } from './create-product';
import { WaterTypeService } from './water-type.service';
import { SpinnerType } from './spinner-type';
import { AlertifyService } from './alertify.service';
import { MessageType, Position } from './alertify.models';

@Component({
  selector: 'app-create-product',
  templateUrl: './create-product.component.html',
  styleUrls: ['./create-product.component.css']
})
export class CreateProductComponent implements OnInit {
  productValidation!: FormGroup;
  // 存储后端返回的水类型列表
  waterTypes: List_Water_Type[] = [];

  constructor(
    private formBuilder: FormBuilder,
    private productService: ProductService,
    private waterTypeService: WaterTypeService,
    private alertify: AlertifyService
  ) {}

  ngOnInit(): void {
    // 初始化表单控件
    this.productValidation = this.formBuilder.group({
      weight: ['', [Validators.required]],
      nitrogen: [false],
      water: new FormControl(null) // 单选场景用FormControl，多选用FormArray
    });

    // 加载后端水类型数据
    this.loadWaterTypes();
  }

  // 从后端获取水类型列表
  loadWaterTypes(): void {
    this.waterTypeService.getWaterTypes().subscribe({
      next: (res) => this.waterTypes = res,
      error: () => {
        this.alertify.message('加载水类型失败', {
          dismissOthers: true,
          messageType: MessageType.Error,
          position: Position.TopRight
        });
      }
    });
  }

  @Output() createdProduct: EventEmitter<Create_Product> = new EventEmitter();

  create(): void {
    this.showSpinner(SpinnerType.BallAtom);
    const formValue = this.productValidation.value;
    
    // 映射表单值到Create_Product对象
    const create_product: Create_Product = {
      weight: formValue.weight,
      nitrogen: formValue.nitrogen,
      water: formValue.water ? [formValue.water] : [] // 匹配Create_Product的数组类型
    };

    this.productService.create(create_product, () => {
      if (this.data.callback) this.data.callback();
      this.hideSpinner(SpinnerType.BallAtom);
      this.alertify.message("产品添加成功", {
        dismissOthers: true,
        messageType: MessageType.Success,
        position: Position.TopRight
      });
      this.createdProduct.emit(create_product);
    }, errorMessage => {
      this.hideSpinner(SpinnerType.BallAtom);
      this.alertify.message(errorMessage, {
        dismissOthers: true,
        messageType: MessageType.Error,
        position: Position.TopRight
      });
    });
  }

  // 补充已有的加载/隐藏Spinner方法
  showSpinner(type: SpinnerType): void { /* 你的实现逻辑 */ }
  hideSpinner(type: SpinnerType): void { /* 你的实现逻辑 */ }
}

步骤2：完善HTML模板 #

绑定表单控件并遍历水类型选项：

<mat-form-field>
  <mat-label>水类型</mat-label>
  <!-- 绑定表单的water控件 -->
  <mat-select formControlName="water">
    <!-- 遍历水类型列表，track by id提升性能 -->
    @for (waterType of waterTypes; track waterType.id) {
      <mat-option [value]="waterType">{{ waterType.waterType }}</mat-option>
    }
  </mat-select>
  <!-- 可选：添加必填验证提示 -->
  <mat-error *ngIf="productValidation.get('water')?.invalid && productValidation.get('water')?.touched">
    请选择水类型
  </mat-error>
</mat-form-field>

关键注意事项 #

• 多选场景调整：若需要选择多个水类型，将表单的water控件改为FormArray，并给mat-select添加multiple属性
• 后端接口校验：确保WaterTypeService.getWaterTypes()正确返回List_Water_Type[]格式的数据
• 数据结构匹配：若Create_Product的water字段不需要数组类型，可修改类定义及赋值逻辑为单个List_Water_Type对象

内容的提问来源于stack exchange，提问作者Mustafasan