My Issue is: I am trying to make what should be a very simple form in my Angular application, but no matter what, it never works.
Why am I getting that error? Am I missing something?
login.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SigninComponent } from './signin/signin.component';
import { SignupComponent } from './signup/signup.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
declarations: [
SigninComponent,
SignupComponent
],
imports: [
CommonModule,
BrowserModule,
ReactiveFormsModule,
FormsModule
],
exports:[
SigninComponent,
SignupComponent
]
})
export class LoginModule { }
login.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'app-signin',
templateUrl: './signin.component.html',
styleUrls: ['./signin.component.scss']
})
export class SigninComponent implements OnInit {
signinForm:any;
constructor(private fb:FormBuilder) { }
ngOnInit(): void {
this.signinForm = new FormGroup({
email : new FormControl(''),
password : new FormControl('')
})
}
}
login HTML
<form [formGroup]="signinForm">
<label for="email" >Email</label>
<input type="text" id="email" value="" formControlName="email" placeholder="Enter your email id">
<label for="password" >Password</label>
<input type="password" id="password" formControlName="password" placeholder="Enter your password">
<button type="submit" >Submit</button>
</form>
CodePudding user response:
You can use form builder to create a form.
basicForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit(): void {
this.basicForm = this.formBuilder.group({
email : new FormControl(''),
password : new FormControl('')
})
}
onFormSubmit(){
const value =this.basicForm.value;
}
In HTML
<form [formGroup]="signinForm">
<label for="email" >Email</label>
<input type="text" id="email" value="" formControlName="email" placeholder="Enter your email id">
<label for="password" >Password</label>
<input type="password" id="password" formControlName="password" placeholder="Enter your password">
<button (click)=onFormSubmit() >Submit</button>
</form>