My problem is with Template Driven Forms. I have two components (parent and child) and I want to pass default values for controls inside child component. In child component I have reference to the parent's form by viewProviders.
viewProviders: [{provide: ControlContainer, useExisting: NgForm}] Code: Stackblitz
I want to know if it is possible to set default values for child controls from the parent without using ControlValueAccessor or passing values through Input().
Parent Component:
TS:
... model = { name: "Test", phone: 1234567890, // phone control is inside child component (nested-form) } ... HTML:
<form #form="ngForm"> <div class="form-group"> <label for="name">Name</label> <input [(ngModel)]="model.name" class="form-control" id="name" name="name" required type="text"> </div> <app-nested-form></app-nested-form> </form> Child Component
TS:
import { Component, Host } from '@angular/core'; import { ControlContainer, NgForm } from '@angular/forms'; @Component({ selector: 'app-nested-form', templateUrl: './nested-form.component.html', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], }) export class NestedFormComponent { model: any = { phone: '', }; constructor(@Host() controlContainer: ControlContainer) { console.log((controlContainer as NgForm).form); // phone control exists in form but without value } } 