Угловая привязка 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

Мое текущее решение - это (я считаю это ОЧЕНЬ уродливым)

Базовая форма Модель

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'];
  }
}

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 );
  }
}

Answer 2

Я думаю, что это будет спроектированный подход:

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) обратный вызов.