Angular ReactiveForm 到模型映射

Question

我已经开发了一个应用程序一个月了。我遇到了很多问题，几乎所有问题我都找到了解决方案，而不是打开线程，但有一个设计问题我还没有弄清楚。

假设我有一个名为 MonkeyComponent 的小组件，它只有一个用于我的模型的表单 (Monkey)

export class Car {
  model: string
}


export class Monkey {
  // If doc contains 8 digits
  driversLicense?: string;

  // If doc contains 13 digits
  pubId?: string;

  name: string;
  age: number;
  car: Car; // another model (could be added to form later)
}


export class AppComponent {
  formGroup: FormGroup;

  constructor(private fb: FormBuilder, private store: MonkeyStore) {
    this.formGroup = this.fb.group({
      name: [''],
      doc: [''],
      age: [''],
    });
  }

  save() {
    // now I need to map my form value to my monkey model
    // but they are mismatched (because doc can be used to populate
    // either pubId or driversLicense)
  }
}

这种表单映射在我项目的许多模型中都很常见(表单的一个字段代表模型中的另一个字段)

我也不能创建多个字段(客户要求)

您将如何创建此映射？我愿意接受设计建议(如果您有更好的选择，则不需要类模型)

有反应式的方式来做到这一点吗？

不必使用 Object.assign 然后手动映射发散字段是否可以避免？

一个干净的解决方案是找到一种 this.formGroup.value 的方法

{
   pubId: '1234567890123',
   name: 'Miwalkey',
   age: 12,
}

或者

{
   driversLicense: '12345678',
   name: 'Miwalkey',
   age: 12,
}

取决于文档的值(长度)。

Answer 1

我认为这将是设计的方法:

ngOnInit() {
    this.formGroup.valueChanges.subscribe(val => {
         if (val.doc.length === 13) {
             monkey.pubId = val.doc;
         } else {
             monkey.driversLicense = val.doc;
         }
    });
}

或者你可以做

this.formGroup.get('doc').valueChanges.subscribe(val => {
       if (val.length === 13) {
         monkey.pubId = val;
       } else {
         monkey.driversLicense = val;
       }
  });

此外，如果您使用 ngModel，您可以将相同的逻辑放在 (ngModelChange) 中打回来。