Applying angular2 form directives to custom input form elements

Question

I want to create a custom InputCustom component and use it to create model-driven forms.

My custom component just wraps an input field and uses Bootstrap material design for look'n'feel.

@Component({
 selector:'inputCustom',
 template:`
    <div class="form-group label-floating is-empty">
        <label class="control-label" for="input">Type here</label>
        <input class="form-control" id="input" type="text">
        <p class="help-block">Some help text</p>
        <span class="material-input"></span>
    </div>
`})
class InputCustom{....}

In Angular2 when you create a model-driven form

<form [ngFormModel]="formRef">
    <input type ="email" ngControl="email">
</form>

all Controls present on form elements are registered into a ControlGroup. By using the formRef you can track field values inside controllers.

@Component({...})
class FormController{
    formRef: ControlGroup;
    constructor(...){
        this.form.valueChanges.subscribe(data => console.log('changes',  data));
    }
}

Now, I want people to use my component like this

<form [ngFormModel]="formRef">
    <inputCustom type ="email" ngControl="email">
</form>

Q1: Do I need write my own custom ngControl directive?

Q2: How to propagate ngControl to the inner <input> element wrapped by <inputCustom>?

Q3: How should I register my Control inside the surrounding forms ControlGroup?

This used to be soooooo simple in Angular 1.x, so painful now : ( — ct5845, Mar 08 '16 at 19:31

score 3 · Accepted Answer · edited May 23 '17 at 12:25

I see two ways to implement that:

Provide your control as parameter of your custom component:

@Component({
  selector: 'inputCustom',
  template: `
    <input [ngFormControl]="control"/>
  `
export class FormFieldComponent {
  (...)
  @Input()
  control: Control;
}

This way your input will automatically takes part of the form defined in the parent component.

Implement an ngModel-compliant component. It's a bit longer to implement (you need to implement and register a ControlValueAccessor within a custom directive) but this way you will be able to use directly the ngFormControl and ngModel directly on your custom component.
```
<inputCustom type ="email" [ngFormControl]="email">
```
See this question for more details: Angular 2 custom form input

I think that this article could interest you:

Implementing Angular2 forms – Beyond basics (part 2) - http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/

score 2 · Answer 2 · answered Feb 26 '16 at 09:12

I guess a custom ValueAccessor should do.

See
- https://plnkr.co/edit/Bz7wLC5qq7s6Fph1UwpC?p=preview (value accessor provided by DI)

    providers: [provide(NG_VALUE_ACCESSOR, {useClass: UIDropdownComp, multi: true})]
})
export class UIDropdownComp implements ControlValueAccessor {

- http://plnkr.co/edit/slVMz6Kgv6KlnUNMDe3o?p=preview (ngControl injected into the component and value accessor assigned "manually"

export class Address implements ControlValueAccessor{
addressForm: ControlGroup;
    value:any;
     addressForm: ControlGroup;
  constructor(@Optional() ngControl: NgControl, elementRef: ElementRef,fb: FormBuilder) {  
    ngControl.valueAccessor = this;

See also https://github.com/angular/angular/issues/2543

score 0 · Answer 3 · answered May 30 '16 at 19:36

0

Angular 2 material which implements custom input form element is a great source of information to see how to implement ValueAccessor.

So just dive in the source code here and have a look at the input component : https://github.com/angular/material2

answered May 30 '16 at 19:36

Nicolas Forney

868
2
13
21

Applying angular2 form directives to custom input form elements

3 Answers3

Linked