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. I'm not sure I completely agree with that, but I'm letting you know about it. — Mark Rajcok
– Mark Rajcok, Commented Jan 15, 2016 at 15:53

Thierry Templier · Accepted Answer · 2016-05-15 21:57:27Z

5

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.

edited May 15, 2016 at 21:57

answered Jan 15, 2016 at 15:15

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Andris Krauze Over a year ago

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?

Julien Alary Over a year ago

I don't think enabling Prod mode is the right to fix this issue... Just hiding the problem...

Thierry Templier Over a year ago

Yes, you're right. In fact, I would implement a ngForm / ngControl compliant component. See this answer: stackoverflow.com/questions/34948961/…. This way we shouldn't have the problem anymore since we'll take part of the whole form validation lifecycle...

koppor Over a year ago

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.

Julien Alary · Accepted Answer · 2016-02-09 11:25:13Z

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 9, 2016 at 11:25

Julien Alary

7801 gold badge5 silver badges16 bronze badges

2 Comments

Thierry Templier Over a year ago

Thanks for pointing this out, Julien! I updated the plunkr of my answer accordingly

Julien Alary Over a year ago

Found this solution here: stackoverflow.com/questions/34364880/…

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related