Getting Access to Controls in Angular using Reactive Forms
app.component.ts
import {Component, OnInit} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
genders = ['male', 'female'];
signupForm: FormGroup;
ngOnInit(): void {
this.signupForm = new FormGroup({
'username': new FormControl(null, Validators.required),
'email': new FormControl(null, [Validators.required, Validators.email]),
'gender': new FormControl('male') // default value for radiobutton => male
})
;
}
onSubmit() {
console.log(this.signupForm);
}
}
app.component.html
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="username">Username</label>
<input
type="text"
id="username"
class="form-control"
formControlName="username">
<span
*ngIf="!signupForm.get('username').valid && signupForm.get('username').touched"
class="help-block">Please enter a valid username</span>
</div>
<div class="form-group">
<label for="email">email</label>
<input
type="text"
id="email"
class="form-control"
formControlName="email">
<span
*ngIf="!signupForm.get('email').valid && signupForm.get('email').touched"
class="help-block">Please enter a valid email</span>
</div>
<div class="radio" *ngFor="let gender of genders">
<label>
<input
type="radio"
[value]="gender"
formControlName="gender">{{ gender }}
</label>
</div>
<span
*ngIf="!signupForm.valid && signupForm.touched"
class="help-block">Please enter valid data</span>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
</div>
</div>
app.component.css
.container {
margin-top: 30px;
}
.input.ng-invalid.ng-touched {
border: 1px solid red;
}