Passing form to AngularJS component for validation

Question

I'm moving my legacy code base to the new component architecture promoted with AngularJS 1.5. I encountered an issue when doing this for larger forms. Traditionally, I would attach form validation as follows:

<form name="myForm">
  <input type="text" name="input1" ng-model="vm.input1" required />
  <div ng-messages="myForm.input1.$error">
    <div ng-message="required">Please fill out this field.</div>
  </div>
  <!-- many more inputs -->
</form>

When transitioning to a component architecture, I have to explicitly pass the form to the component:

<form name="vm.myForm">
  <my-awesome-input-component model="vm.input1" form="vm.myForm"><my-awesome-input-component>
  <!-- many more inputs -->
</form>

I would like to avoid polluting the vm with my form. Is there a better way to achieve the desired component architecture for forms?

Answer 1

Update - changed form-name to form-reference, since it was not explicit that we were passing the actual form reference and not just the name of the form. This can be called whatever you wish, just be clear of what it actually is.

As the comment from Iain Reid says, you don't need to use vm for this. You just name the form anything you want and then pass that name to your component, so it would look like this:

<form name="myForm" ng-submit="ctrl.someFunction()" novalidate>
   <my-input form-reference="myForm"></my-input>
   <button type="submit">Some button</button>
</form>

Making sure that you write "novalidate" in your form to disable default browser validations, if you want to handle validations on your own(which by your use of ng-messages I think you do).

Then from there, on my component I would write something like:

angular.module("myApp")
  .component("myInput",{
     templateUrl:'path/to/template.html'
     bindings:{
       formReference:'<',
       myInputModel:'<',
       onUpdate:'&'
     },
     controller: MyInputController
  }

And then in the input template:

<input type="text" name="myInput" ng-model="$ctrl.myInputModel" ng-change="$ctrl.update($ctrl.myInputModel)" required />
<div ng-messages="$ctrl.formReference.myInput.$error">
  <div ng-message="required">Please fill out this field.</div>
</div>

A few extra notes on the bindings and how to pass and update models:

• '<' : means one way binding, which Angular says to use for all components from now on. In order to update the value and have two way binding, we need to include a "onUpdate" function.
• onUpdate : '&' what I am saying here is that I will pass a function to update the model(a callback for component events).

So in the input controller I would write something like:

function MyInputController(){
    var ctrl = this;
    ctrl.update = function(value){
        ctrl.onUpdate({value: value});
    };
}

And, finally when I use my component inside a form:

<form name="myForm" ng-submit="ctrl.someFunction()" novalidate>
   <my-input form-reference="myForm" my-input-model="ctrl.anyModelIWant" on-update="ctrl.updateMyInput(value)"></my-input>
   <button type="submit">Some button</button>
</form>

And the controller of the form would have a function:

...
ctrl.updateMyInput = function(value){
   ctrl.anyModelIWant = value;
}
...

Official docs: https://docs.angularjs.org/guide/component

I hope all of this helps someone out there :-)