ng reactive forms
//your template
<form class="pb-5 px-3" [formGroup]="form"> <!--bind formGroup to the FormGroup object in your component-->
<h2 class="text-center">Login</h2>
<div class="form-group">
<label for="username">Username</label>
<input
id="username"
type="text"
class="form-control"
formControlName="username" <!--set formControlName to the relevant FormControl in your form object from the component-->
/>
</div>
<button class="btn btn-primary" type="submit">Sign Up</button>
</form>
//component.ts
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms'; //<<<< import these
@Component({
selector: 'signup-form',
templateUrl: './signup-form.component.html',
styleUrls: ['./signup-form.component.scss'],
})
export class SignupFormComponent {
form = new FormGroup({ //<<<< create a FormGroup object
username: new FormControl(), //<<<< create your form controls
});
}
//app.module.ts
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
ReactiveFormsModule,
...
],
})
export class AppModule { }