angular 2 form level validation using components

Question

In Angular 2 how do you add an input control in a custom component that will bind to the form control container in the parent component? (FOLLOWING CODE SIMPLIFIED FOR BREVI

Answer 1

Not sure if this is the best way for your scenario, but I think it works.

You can create the Control on the parent element and pass it as @Input to the child. The child can then use it as the control on the form element.

For example (plunk):

@Component({
  selector:'my-special-input'
  template:`
         
    `
})
export class specialInputComponent implements OnInit{
  @Input() nameControl;
}

@Component({
  selector:'my-form',
  template:`
    

       
    
    Submit
    `,
    directives: [specialInputComponent]
})
export class formComponent{
    nameControl:Control;
    myForm: ControlGroup;

    constructor(){
        this.nameControl = new Control("", Validators.required );
        this.myForm = new ControlGroup({special: this.nameControl});
        }
}

You could probably also pass the ControlGroup to the child and let the child add itself with addControl() but you might have to deal with the update cycle getting a little messy.