I would like to create a reusable component which has a fixed look and
functionality that can be used across multiple applications. It contains
`<input>` elements that require validation, so they need to be associated
with the parent form where the component is defined. How do you associate
the `input` in this child component with `ngForm` in its parent component?
**myComponent**
@Component({
selector: 'myComponent',
template: `<div><input type="text" [(ngModel)]="text" /></div>` //how
add ngControl and associate with parent form?
})
export class MyComponent {
text: string;
}
**app1, but there are app2 etc...**
import {MyComponent} from './myComponent';
@Component({
selector: 'myComponent',
template: `<form #myForm="ngForm"
(ngSubmit)="submited()"><myComponent></myComponent></form>`,
directives: [MyComponent]
})
export class MyComponent {
submitted() {
}
}
In each app, `myComponent` has to have its `ngControl` associated with the
`ngForm` so it can be validated and accessed the same way as a regular
`ngControl` which is defined directly inside of `ngForm`. Also note that
adding `ngControl` without having a direct `ngForm` parent will throw an
error 'no container found.'.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
