Angular 角度反应形式到模型映射

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

假设我有一个名为MonkeyComponent的小组件，它只是我的模型的一个表单（Monkey）

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

此外，我不能创建多个字段（客户要求）

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

有没有一种反应式的方法可以做到这一点

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

一个干净的解决方案是找到一种方法

this.formGroup.value

be

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

或

---

取决于doc的值（长度）。

我认为这是设计的方法：

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）

回调中放入相同的逻辑。

我当前的解决方案是这样的（我觉得这很难看）

基本形式模型

export class FormModel {
  constructor(input?: any) {
    if (input) {
      this.fromJSON(input);
    }
  }

  fromJSON(input: any): this {
    return Object.assign(this, input);
  }
}

汽车（模型）

猴子（模型）

MonkeyComponent

export class MonkeyComponent {
  formGroup: FormGroup;

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

  save() {
    const monkey = new Monkey(this.formGroup.value);
    console.log(monkey );
  }
}

---

我有点不明白你到底想做什么？你现在正在经历什么？@JBoothUA我添加了更多的信息，但基本上正如我所说的，我正在尝试将我的表单字段映射到我的猴子模型。但是，正如您所看到的，monkey模型有两个字段（pubId和driversLicense），它们都是文档。但是表单只有一个字段（用户可以指定这两个文档选项中的任何一个），我需要根据“doc”字段在我的模型上表示的内容来设置我的模型属性（pubId或driversLicense）（我可以根据“doc”字段的长度知道这一点，如模型上的注释所示）您可以在初始化之后动态添加/删除表单控件。这就是你要找的吗？@AmitChigadani nop，我正试图在我的猴子模型上设置正确的字段。这取决于表单中“doc”字段的长度。在用户提交后，我需要检查“doc”是否具有

长度===8

（设置driversLicense）或13（设置pubId），这解决了问题，但为组件添加了业务逻辑，这对我来说是非常不需要的。顺便说一句，“doc”字段是表示pubId或driverslicense的字段据我所知，如果您希望它是“反应式”的，您必须在组件的formGroup属性中添加一些逻辑。我根据您的代码创建了另一个示例，并对代码进行了一些小的更改。我已经删除了FormModel，并使用RxFormBuilder生成了FormGroup。这里是链接

export class FormModel {
  constructor(input?: any) {
    if (input) {
      this.fromJSON(input);
    }
  }

  fromJSON(input: any): this {
    return Object.assign(this, input);
  }
}

export class Car extends FormModel {
  model: string;
}

export class Monkey extends FormModel {
  pubId?: string;
  driversLicense?: string;

  car: Car;
  name: string;
  age: number;

  fromJSON(input: any): this {
    super.fromJSON(input);

    this.setDoc(input.doc);
    this.car = new Car(input.car);

    return this;
  }

  setDoc(doc: string) {
    if (doc.length === 8) {
      this.driversLicense = doc;
    } else if (doc.length === 13) {
      this.pubId = doc;
    }

    delete this['doc'];
  }
}

export class MonkeyComponent {
  formGroup: FormGroup;

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

  save() {
    const monkey = new Monkey(this.formGroup.value);
    console.log(monkey );
  }
}