Wsrtjtyk

I've been developing an app for a month now. I have come across many problems and almost all of them I've found solutions instead of opening threads but there is one design problem I still haven't figured out.

Suppose I have a small component called MonkeyComponent, it just has a form for my model (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)

  }

}

This form mapping is common in many models of my project (one field of the form representing another field in the model)

Also I can't create multiple fields (client requirement)

How would you create this mapping? I am open to design suggestions (class model is not required if you have a better option)

Is there a Reactive-way to do this?

Is it avoidable to not have to use Object.assign and then manually mapping the divergent fields?

A clean solution would be to find a way to this.formGroup.value be

{

   pubId: '1234567890123',

   name: 'Miwalkey',

   age: 12,

}

or

{

   driversLicense: '12345678',

   name: 'Miwalkey',

   age: 12,

}

depending on the value (length) of doc.

I have created a sample example based on your need of model-based reactive form.

I have used @rxweb/reactive-form-validators to achieve model based reactive form binding and value changes can be applied non FormControl fields. Later, I will explain in detail why I have used @rxweb/reactive-form-validators.

Let me describe What I have done in the sample example.

Step 1: I have created two model Monkey and Car as per your fields.

In the Monkey Model I have applied some validation decorators(required, minLength,maxLength,propObject), those will mark FormControl is valid or not. If you see the property Doc of Monkey model, I have applied if/else clause to set the value based on your business requirement.

Here is the Monkey Model:

import { required,digit,prop,range,propObject,minLength,maxLength } from "@rxweb/reactive-form-validators"

import { Car } from './car.model'

export class Monkey  {

  private _docValue:string;

   // If doc contains 8 digits

  driversLicense?: string;



  // If doc contains 13 digits

  pubId?: string;



  @required()

  name: string;



  @digit()

  age: number;



  @digit()

  @minLength({value:8})

  @maxLength({value:13})

  set doc(value:string){

    this._docValue = value;

    if(value && value.length ==8)

      this.driversLicense = value;

    else if(value && value.length == 13)

      {

        this.driversLicense = undefined;

        this.pubId = value;

      }

  }



  get doc() :string {

    return this._docValue; 

  }



  @propObject(Car)

  car: Car; // another model (could be added to form later)

}

In the Car Model I have applied required validation decorator, just for your reference:

Here is the Car Model:

import { required } from "@rxweb/reactive-form-validators"



export class Car {



      @required()

      model:string;

}

Step 2: In the component I have used ‘RxFormBuilder’ instead of Angular ‘FormBuilder’, because ‘RxFormBuilder’ provides model based reactive form binding. You don’t need to subscribe valueChange or don’t need to call setValue method each, this will automatically managed by rxweb validation framework.

Here is the Component Code:

export class AppComponent implements OnInit {

  monkeyFormGroup:FormGroup

  monkey:Monkey;

  constructor(private formBuilder:RxFormBuilder){}



  ngOnInit(){

      this.monkey = new Monkey();

      this.monkey.car = new Car();

      this.monkeyFormGroup = this.formBuilder.formGroup(this.monkey)

  }



}

If you see the above code I have created a model object and pass it to the formGroup method of RxFormBuilder to generate the Angular FormGroup object. If you don’t want to create a Nested FormGroup then don’t define Car object in the Monkey class object property.

Step 3: On the HTML side follow the standard angular practices to bind the form.

Step 4: While passing data to the server, try to use Monkey model object instead of FormGroup value, because you have two properties(driversLicense & pubId) which are not available in the FormGroup.

Here is the Filled Json of monkey Model Object

{ "car": { "model": "Ford" }, "_docValue": "1234567890123", "pubId": "1234567890123", "name": "Miwalkey", "age": "12" }

Why I have used @rxweb/reactive-form-validators?

This is the new concept of model-based reactive form validation in angular based application from rxweb validation framework. But I believe this is a more efficient way to design the form because your validation and business logic will be centralized in the class. You can use the same model in multiple components without writing the same code again and again.
For more information about rxweb validation decorators https://rxweb.io/validation-decorators/alpha

Steps I have followed to achieve this:

1. npm install @rxweb/reactive-form-validators


2. import 'RxReactiveFormsModule' in root module.


3. Follow the above mentioned steps.

Please let me know if you have any question.

I think this would be the designed approach:

ngOnInit() {

    this.formGroup.valueChanges.subscribe(val => {

         if (val.doc.length === 13) {

             monkey.pubId = val.doc;

         } else {

             monkey.driversLicense = val.doc;

         }

    });

}

or you could do

this.formGroup.get('doc').valueChanges.subscribe(val => {

       if (val.length === 13) {

         monkey.pubId = val;

       } else {

         monkey.driversLicense = val;

       }

  });

also if you're using ngModel you could put the same logic inside of an (ngModelChange) callback.

My current solution is this (I find this VERY ugly)

Base Form Model

export class FormModel {

  constructor(input?: any) {

    if (input) {

      this.fromJSON(input);

    }

  }



  fromJSON(input: any): this {

    return Object.assign(this, input);

  }

}

Car (model)

export class Car extends FormModel {

  model: string;

}

Monkey (model)

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

  }

}