Custom angular2 form input component with two way binding and validation inside a component

Question

Is there a way to make a two way binding input component, that can also have a validation inside the component?

What I'm trying to achieve is to have a components that I could line up in my forms as follows:

<form #f="ngForm">
            <my-form-input [(inputModel)]="name" [inputField]="myFormInputName"></my-form-input>
            <my-form-input [(inputModel)]="name2" [inputField]="myFormInputName2"></my-form-input>
...
            <my-form-input [(inputModel)]="lastItem" [inputField]="lastItemName"></my-form-input>

</form>

I have a following setup and can't figure out, how to make it right:

The component:

import {Component,Input, Output,EventEmitter} from 'angular2/core'
import {FORM_DIRECTIVES}    from 'angular2/common';

@Component({
  selector: 'my-form-input',
  directives: [FORM_DIRECTIVES],
  template:
    `
    <input type="text" class="form-control"  id="i1" required [ngModel]="inputModel" (ngModelChange)="onChangeInput($event)" ngControl="ctrl" #ctrl="ngForm"/>
    <p>{{"Is field valid? I would like to make some decisions here depending on that: "+ctrl.valid}}</p>

  `
})
export class InputComponent {

  constructor(){};

  @Input()  inputField:string;
  @Input()  inputModel: Object;
  @Output() inputModelChange = new EventEmitter();

  onChangeInput(event){
    this.inputModel=event;
    this.inputModelChange.emit(event);
  }
}

The app:

//our root app component
import {Component} from 'angular2/core'
import {FORM_DIRECTIVES}    from 'angular2/common';
import {InputComponent} from './my.input'


@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <p>Is there a way to make a custom 2 way binding form input component having also validation?</p>
      <form #f="ngForm">

        <my-form-input [(inputModel)]="name" [inputField]="myFormInputName"></my-form-input>

        <p>{{name}}</p>
      </form>
    </div>
  `,
  directives: [InputComponent,FORM_DIRECTIVES]
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }
}

I also made a Plunker to ilustrate my problem: http://plnkr.co/edit/0vXjHbQmv7v7EKQcLWaa?p=preview

Note that the Angular docs discourage doing user input validation in a component: "Our components are big consumers of services. They depend upon services to handle most chores. They don't fetch data from the server, they don't validate user input, they don't log directly to the console. They delegate such tasks to services." -- [Arch doc](https://angular.io/docs/ts/latest/guide/architecture.html#!#service). I'm not sure I completely agree with that, but I'm letting you know about it. — Mark Rajcok, Jan 15 '16 at 15:53

Thierry Templier · Accepted Answer · 2016-05-15T21:57:27.903

You can pass the form control to your component to create a dedicated control for the input. Based on this new control to display errors when their valid attributes are false:

@Component({
  selector: 'my-form-input',
  directives: [FORM_DIRECTIVES],
  template: `
    <input type="text" class="form-control"  id="i1"   
       [ngModel]="inputModel"
       (ngModelChange)="onChangeInput($event)"
       [ngFormControl]="formCtrl.controls[inputField]"/>
    <p>Is field valid? I would like to make some decisions
       here depending on that: {{formCtrl.controls[inputField].valid}}
    </p>
  `
})
export class InputComponent implements OnInit {
  @Input()  inputField:string;
  @Input()  formCtrl;
  @Input()  inputModel: Object;
  @Output() inputModelChange = new EventEmitter(); 

  ngOnInit() {
    this.formCtrl.control.addControl(
        this.inputField, new Control('', Validators.required));
  }

  onChangeInput(event){
    this.inputModel=event;
    this.inputModelChange.emit(event);
  }
}

You need to use the addControl method to make the state of your whole form consistent with controls you created within your input components.

In your case, you define your controls inline using the ngControl directive. I made some tests but I can't make it work this way...

Here is the way to use this component from the parent one:

@Component({
  selector: 'my-app', 
  template: `
    <form #f="ngForm">
      <my-form-input [(inputModel)]="name" [inputField]="myFormInputName" [formCtrl]="f"></my-form-input>
    </form>
  `,
  directives: [ FORM_DIRECTIVES, InputComponent ]
})
export class AppComponent {
}

It remained a check problem just after starting. The global state of the form wasn't updated and the following error occured:

Expression '
    Valid : {{f.valid}} in AppComponent@1:24' has changed after it was checked. Previous value: '
    Valid : true'. Current value: '
    Valid : false'

To fix this aspect, have a look at the Julien's answer based on the ChangeDetectorRef class and its detectChanges method...

Here is a sample plunkr: https://plnkr.co/edit/Z4uOUq2q4iXdpo0J6R1o?p=preview.

It helps indeed. I am just a bit confused about this enableProdMode trick. What are the circumstances when I should use enableDevMode again? Is it 'DEV' from angular2 point of view or 'DEV' from project's being used point of view? — Andris Krauze, Jan 18 '16 at 07:37
I don't think enabling Prod mode is the right to fix this issue... Just hiding the problem... — Julien Alary, Feb 09 '16 at 10:55
Yes, you're right. In fact, I would implement a `ngForm` / `ngControl` compliant component. See this answer: http://stackoverflow.com/questions/34948961/angular-2-custom-form-input. This way we shouldn't have the problem anymore since we'll take part of the whole form validation lifecycle... — Thierry Templier, Feb 09 '16 at 11:16
If someone stumbles here and wonders, why it doesn't work with `select`, please double check that `(ngModelChange)` is bound at `select`, not at `option`. — koppor, May 15 '16 at 20:44

score 4 · Answer 2 · answered Feb 09 '16 at 11:25

4

Thierry's answer is partially good, as when enablingProdMode, you're just hiding the problem : you're not refreshing your component.

You have to call "detectChange" after init of your form component:

export class AppComponent {
    constructor(private cdr: ChangeDetectorRef) {}
    ngOnInit() {
        this.cdr.detectChanges();
    }
}

answered Feb 09 '16 at 11:25

Julien Alary

780
1
5
16

Thanks for pointing this out, Julien! I updated the plunkr of my answer accordingly – Thierry Templier Feb 09 '16 at 12:37
Found this solution here: http://stackoverflow.com/questions/34364880/expression-has-changed-after-it-was-checked/35243106#35243106 – Julien Alary Feb 09 '16 at 15:05

Custom angular2 form input component with two way binding and validation inside a component

2 Answers2

Linked