Hey everyone! I've successfully implemented control forms in my login.component.ts for handling email and password input. Now, I want to add these controls to my register.component.ts as well. Specifically, how can I implement controls for the password and confirm password fields in my register component? Here is a snippet from my login.component.ts:
import {FormControl, FormGroup, Validators} from "@angular/forms";
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
form: FormGroup;
ngOnInit() {
this.form = new FormGroup({
Email: new FormControl('', [
Validators.required,
Validators.pattern(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)
]),
Password: new FormControl('', [
Validators.required,
Validators.minLength(8),
Validators.maxLength(20)
])
});
}
onSubmit() {
console.log(this.form);
}
onReset() {
this.form.reset();
}
}
In the code above, I have shown the login.component.ts file that handles the form fields for email and password. Now, I need assistance adding a control for the password confirm field in the register.component.ts. How should I go about it?
import { Component, OnInit } from '@angular/core';
import {FormControl, FormGroup, Validators} from "@angular/forms";
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
constructor() { }
register(f){
console.log(f.value)
}
form: FormGroup;
ngOnInit() {
this.form = new FormGroup({
User: new FormControl('',
[Validators.required]),
Email: new FormControl('', [
Validators.required,
Validators.pattern(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)
]),
Password: new FormControl('', [
Validators.required,
Validators.minLength(8),
Validators.maxLength(20)
]),
Confirm: new FormControl('', [
Validators.required,
Validators.minLength(8),
Validators.maxLength(20) ])
});
}
onSubmit() {
console.log(this.form);
}
onReset() {
this.form.reset();
}
}