Formbuilder validation on non-form properties


#1

I have a form thats created with Angular2’s formbuilder. I would like to bind other properties to this form so that they get validated and submitted as one object.

 this.myForm = this.formBuilder.group({
      title:      ['',Validators.required],
      description:['',Validators.required],
      start:      [this.dates[0],Validators.required],     <---
      end:        [this.dates[1],Validators.required],   <---
      group:      ['',Validators.required],
      category:   ['',Validators.required],
      keywords:   ['',Validators.required],
      location:   [this.location,Validators.required],  <---
      picture:    [''],
    });
  }

<form [ngFormModel]="myForm" (ng-submit)="onSubmit(myForm.value)">
    <ion-item>
      <ion-label stacked>Title</ion-label>
      <ion-input [ngFormControl]="myForm.controls['title']"></ion-input>
    </ion-item>
  ......
<button type="submit" [disabled]="!myForm.valid" class="button-full button-primary">Submit</button>
      </form>

The date comes from the Cordova datepicker and is set in a property, the location gets returned by a map modal that opens on a button click and is set in another property.

I would like to tie these into to the form for validation feedback and submission as one object.

Any feedback or other more elegant solutions are welcome.


#2

In case anyone stumbles on this post.

I solved it by updating the value of my form when i get data back.

 this.myForm = this.formBuilder.group({
      title:      ['',Validators.required],
      description:['',Validators.required],
      start:      ['',Validators.required],     <---
      end:        ['',Validators.required],   <---
      group:      ['',Validators.required],
      category:   ['',Validators.required],
      keywords:   ['',Validators.required],
      location:   ['',Validators.required],  <--- Cannot submit form until the location has been set
      picture:    [''],
    });
  }

  modal.onDismiss((data) => {
        /*needed to cast to type in order for the update value to be recognised*/

        (<Control>this.myForm.controls['location']).updateValue({lat:data.lat(),lng:data.lng()});
        this.location = data;
    });

My map modal sends data back with the location the user set the marker on, the lat and lng values get added to the form and the validation ‘required’ is in order