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

Answer 2

Here is another approach that some may find useful. Use require to include the parent form in your $ctrl:

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

In the input template:

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

No need to pass the form explicitly into your component as form is automatically added to your $ctrl:

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

I guess technically you are still polluting your vm, but at least you don't have to pass it down explicitly throughout your hierarchy.

Adding text to satisfy 6 character edit requirement, changed period to comma to correct example. Period is confusing for newcomers.

Answer 3

In fact you don't need to pass the form parent to do that. In the template of your awesome-component add a ng-form tag, and use it:

The template for your component:

<ng-form name="myComponentForm">
    <input type="number" ng-model="$ctrl.myModel" name="myField"/>
    <span ng-show="myComponentForm.myField.$invalid">There's an error</span>
</ng-form>

This is the meaning of ngForm directive, to have child forms in directives and components to do validations on sub-group of form fields.