My current project involves implementing a complex scenario in Angular2 (beta 0 with TypeScript in Plunker) that consists of two nested forms, each represented by a separate component.
The primary component, called Word, serves as a representation of a word within a simulated dictionary. The child components are instances of WordSense, each corresponding to a particular sense of the parent word.
Both components utilize model-driven forms, with the child form binding its model's values to form controls using ngModel. This setup allows for easy passage of the word's senses from the parent to the children through two-way bindings.
I have incorporated simple custom validators for both forms. One of my goals is to disable the submit button not only when the parent word form is invalid but also if any of its associated senses are deemed invalid. To achieve this, I introduced an isValid property to the model being edited, along with code to monitor changes in the sense form: whenever a change occurs, the form's validity is checked, and the model's property is adjusted accordingly. As a result, I can implement a validation check at the parent component level in both the view and code, ensuring that submissions are only made when both forms are validated.
In order to accommodate custom validation and additional logic, I transitioned from template-based to model-based forms. However, upon launching the refactored code, I encountered several errors stating "No Directive annotation found," the implications of which are unclear to me.
It's possible that I'm overlooking something obvious, given my newcomer status here. Could someone provide guidance or suggestions? For reference, you can access a reproducible example on this Plunker link: http://plnkr.co/edit/v9Dj5j5opJmonxEeotcR. Below are snippets of essential code excerpted from the example:
a) Parent Component:
@Component({
selector: "word",
directives: [FORM_DIRECTIVES, FORM_PROVIDERS, WordSense],
templateUrl: `
<div>
<!-- Form content goes here -->
</div>
`,
inputs: [
"word"
]
})
export class Word {
// Class implementation
}
b) Child Component:
@Component({
selector: "word-sense",
directives: [FORM_DIRECTIVES],
template: `
<form>
<!-- Form content goes here -->
</form>
`,
inputs: [
"sense",
"ranks",
"fields"
]
})
export class WordSense {
// Class implementation
}