The answer is right on the error message, you need to indicate that it’s standalone and therefore it doesn’t conflict with the form controls: [ngModelOptions]=”{standalone: true}”
Problem description From the documentation we see two different lines with the group() function group(controlsConfig: { [key: string]: any; }, options?: AbstractControlOptions): FormGroup AND group(controlsConfig: { [key: string]: any; }, options: { [key: string]: any; }): FormGroup The 2nd definition is what is deprecated The difference in this lines is options?: AbstractControlOptions and options: { … Read more
I believe you missed an important point: [formGroup] directive in the second example. formControlName is used together with [formGroup] to save your form multiple dot navigations. For example: <div> <input type=”text” [formControl]=”myForm.controls.firstName”/> <input type=”text” [formControl]=”myForm.controls.lastName”/> <input type=”text” [formControl]=”myForm.controls.email”/> <input type=”text” [formControl]=”myForm.controls.title”/> </div> Is equivalent to: <div [formGroup]=”myForm”> <input type=”text” formControlName=”firstName”/> <input type=”text” formControlName=”lastName”/> <input type=”text” … Read more
There are a few issues in your code <div [formGroup]=”form”> outside of a <form> tag <form [formGroup]=”form”> but the name of the property containing the FormGroup is loginForm therefore it should be <form [formGroup]=”loginForm”> [formControlName]=”dob” which passes the value of the property dob which doesn’t exist. What you need is to pass the string dob … Read more