Angular 8: Two way data binding with radio button not working. The variable value is always undefine-CodePudding

I am facing issues with two way data binding for radio button control. I am trying to bind a string variable declared in component with the html template. The value recorded in this variable is always undefined. When I replace value with [value] then the web page itself doesn't get rendered. The component has the variable declared as loginMode: string; I am using alert(this.loginMode) to inspect the value of the variable

Below is the HTML template...

<div  >
        <div >
            <label >
                <input  name="login" type="radio" [(ngModel)]="loginMode" 
                          value="Password Login" >Password Login
                 </label>
         </div>
         <div >
             <label  >
                <input  name="login" type="radio" [(ngModel)]="loginMode" 
                            value="OTP Login" >OTP Login
                </label>
          </div>
 </div>

CodePudding user response：

Make sure you have imported FormsModule inside app.module.ts

CodePudding user response：

The issue was that my new patch of html code was inserted in between existing < form > < /form > tag. When I placed the new code out of this < form > tag, the two way data binding worked fine. Not sure what the reason is. Would be great if anyone could explain the reason.