hani,
The first thing I notice is that both your components have the same
selector. That would be wrong.
On Saturday, July 9, 2016 at 12:29:42 PM UTC-7, hani wrote:
>
> 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.
