Angular forms unable to see the template of few fields

Question

I have a sample project where I have used angular forms. I have created form group object and added form controls and all. But unable to see password field which is in the template and form is not working. Here is the code.

Stackbliz Link

app.component.ts

import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public form: FormGroup = new FormGroup({
    email: new FormControl('', [Validators.required]),
    password: new FormControl('', [Validators.required])
  });

  login() {
    if (this.form.valid) {
      console.log(this.form.value);
    }
  }
}

app.component.html

<h3>Login Form</h3>
<form (ngSubmit)="login()">
  <label>Email: </label>
  <input formControlName="email" type="text" />
  <br><br>
  <label>Password: </label>
  <input  formControlName="password" type="password" />
  <br><br>
  <button type="submit">Login</button>
</form>

Hi I think you missed to add formGroup attribute to the form tag and bind the formGroup object. — SaiSurya
– SaiSurya, Commented Jun 10, 2021 at 4:06

ammadkh · Accepted Answer · 2021-06-10 04:08:14Z

2

Add formGroup attribute in your form.

<form [formGroup]="form" (ngSubmit)="login()">...

answered Jun 10, 2021 at 4:08

ammadkh

6064 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SaiSurya · Accepted Answer · 2021-06-10 04:09:38Z

1

There are two things you have missed in the code one is to add formGroup as said by ammad and also you have to add Reactive forms module in app.module.ts file.

Stackbliz Link

answered Jun 10, 2021 at 4:09

SaiSurya

1,1261 gold badge9 silver badges16 bronze badges

Collectives™ on Stack Overflow

Angular forms unable to see the template of few fields

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related