diff --git a/adev/src/content/reference/errors/NG01354.md b/adev/src/content/reference/errors/NG01354.md new file mode 100644 index 000000000000..46152d1db4ae --- /dev/null +++ b/adev/src/content/reference/errors/NG01354.md @@ -0,0 +1,64 @@ +# NgModel in child component cannot reach parent form + +This warning is emitted when `ngModel` (or any template-driven form control) is placed inside +a child component whose parent component hosts a form directive (`NgForm` or +`FormGroupDirective`), but the control cannot register with that form. + +The root cause is that `NgModel` injects `ControlContainer` with `@Host()`, which stops the +injector from crossing component boundaries. The form directive in the parent component's +template is invisible to `NgModel` in the child's template. + +As a result, the child's controls silently act as standalone — they do not participate in the +parent form's value, validity, or submission state. + +## Fixing the warning + +### Option 1: bridge the `ControlContainer` with `viewProviders` + +Add `viewProviders` to the child component so it re-exports the parent form into its own view. +Use the same class that the warning names — `NgForm` for template-driven forms (`
+import {ControlContainer, NgForm} from '@angular/forms'; + +@Component({ + selector: 'app-child', + template: ``, + viewProviders: [{provide: ControlContainer, useExisting: NgForm}], +}) +export class Child { + email = ''; +} +``` + +```typescript +// Parent uses a reactive form: