angular 区不太活跃 故移动此区

因不可抗力原因要求使用 angular20 开始学这个，然后有个问题很困扰 ，就是一般每个表单都会有个对应的 model 页面上会用 formControlName 。 然后我们的 model 字段很多 在 component 里就有很多这种代码

 const tubeData: TubeModel = {
      commonParams: this.commonParams,
      tubeInitDate: formatDate(formValue.tubeInitDate, 'yyyy/MM/dd HH:mm'),
      tubeInsertionDate: formatDate(formValue.tubeInsertionDate, 'yyyy/MM/dd HH:mm'),
      anticipatedTubeRemovalDate: formatDate(formValue.anticipatedTubeRemovalDate, 'yyyy/MM/dd'),
      tubeId: formValue.tubeId,
      tubeName: formValue.tubeName,
      tubeGroup: formValue.tubeGroup,
      tubeType: formValue.tubeType,
      tubeMaterial: formValue.tubeMaterial,
      tubeProductNumber: formValue.tubeProductNumber,
      tubeProductNumberOtherValue: formValue.tubeProductNumber || '',
      innerLength: formValue.innerLength,
      innerUnit: 'cm',
      bodyPosition: formValue.bodyPosition,
      bodyPart: formValue.bodyPart,
      tubeLength: formValue.tubeLength,
      tubeUnit: 'cm',
      seqNumber: formValue.seqNumber === '其他' ? formValue.seqNumberOther : formValue.seqNumber,
      drainage: formValue.drainage || 0,
      traits: {
        color: formValue.color,
        colorOther: formValue.colorOther || '',
        nature: formValue.nature,
        natureOther: formValue.natureOther || '',
        flavor: formValue.flavor,
        flavorOther: formValue.flavorOther || '',
      },
    };

以及这种

      this.form.patchValue({
      tubeGroup: tube.tubeGroup,
      tubeId: tube.tubeId,
      tubeInitDate: tube.tubeInitDate ? new Date(tube.tubeInitDate) : null,
      tubeInsertionDate: tube.tubeInsertionDate ? new Date(tube.tubeInsertionDate) : null,
      anticipatedTubeRemovalDate: tube.anticipatedTubeRemovalDate
        ? new Date(tube.anticipatedTubeRemovalDate)
        : null,
      tubeName: tube.tubeName,
      tubeType: tube.tubeType,
      tubeMaterial: tube.tubeMaterial,
      tubeProductNumber: tube.tubeProductNumber,
      innerLength: tube.innerLength,
      bodyPosition: tube.bodyPosition,
      bodyPart: tube.bodyPart,
      tubeLength: tube.tubeLength,
      seqNumber: tube.seqNumber,
      drainage: tube.drainage,
    });

还有 init 的时候这种

      ngOnInit(): void {
    this.form = this.fb.group({
      tubeGroup: [null],
      tubeId: [null],
      tubeInitDate: [null],
      tubeInsertionDate: [null],
      anticipatedTubeRemovalDate: [null],
      tubeName: [null],
      tubeType: [''],
      tubeMaterial: [null],
      tubeProductNumber: [null],
      innerLength: [null],
      bodyPosition: [null],
      bodyPart: [''],
      tubeLength: [null],
      seqNumber: [null],
      seqNumberOther: [''],
      drainage: [null],
      color: [null],
      colorOther: [''],
      flavor: [null],
      flavorOther: [''],
      nature: [null],
      natureOther: [''],
    });

  }

我觉得看着很冗余 字段多了一刷一大片 既然有了 model ，有办法简化这部分吗