Often when creating a form on a web page, I need our customers to fill out a field such as a permanent address, as well as a present address( when checked check box then present address fill automatically).I have searched for different methods but couldn't find a specific way to implement this in angular material components
<br>
<br>
<br>
<form name="registerForm" [formGroup]="registerForm" (ngSubmit)="register()" novalidate>
<mat-horizontal-stepper >
<mat-step label="Personal Details" style="font-size: 70%;">
<mat-form-field appearance="outline" style="width:55vw">
<mat-label>Full Name(First Middle Last name)</mat-label>
<input matInput placeholder="full name" formControlName="fullname" [(ngModel)]="customerr.custName">
<mat-hint style="color:red" *ngIf=" registerForm.get('fullname').touched && registerForm.get('fullname').errors?.required">Full name is required</mat-hint>
</mat-form-field>
<br>
<!-- <mat-form-field appearance="outline" style="width:55vw">
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field> -->
<br>
<mat-form-field appearance="outline" style="width:55vw">
<mat-label>Age</mat-label>
<input matInput formControlName="age" placeholder="enter age" [(ngModel)]="customerr.custAge" >
<mat-hint style="color:red" *ngIf=" registerForm.get('age').touched && registerForm.get('age').errors?.required">Full name is required</mat-hint>
</mat-form-field>
<br>
<mat-form-field appearance="outline" style="width:55vw">
<mat-label>Father's Name</mat-label>
<input matInput matInput formControlName="fname" placeholder="enter father's name" [(ngModel)]="customerr.parentsName">
<mat-hint style="color:red" *ngIf=" registerForm.get('fname').touched && registerForm.get('fname').errors?.required">Full name is required</mat-hint>
</mat-form-field>
<br>
</mat-step>
<mat-step label="Personal Details">
<br>
<mat-form-field appearance="outline" style="width:55vw">
<mat-label>MobileNumber</mat-label>
<input matInput placeholder="Phone number" formControlName="mobileNumber" [(ngModel)]="customerr.mobileNumber" >
<mat-hint style="color:red" *ngIf=" registerForm.get('mobileNumber').touched && registerForm.get('mobileNumber').errors?.required">Mobile no name is required</mat-hint>
</mat-form-field>
<br>
<mat-form-field appearance="outline" style="width:55vw">
<mat-label>Email Id</mat-label>
<input
type="text"
matInput
formControlName="email" [(ngModel)]="customerr.emailID"
class="form-input-field"
pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}"
/>
<mat-error *ngIf="registerForm.get('email').hasError('required')"
>Email is required</mat-error
>
<mat-error *ngIf="registerForm.get('email').hasError('email')"
>Please enter a valid email address
</mat-error>
</mat-form-field>
<br>
<mat-form-field appearance="outline" style="width:55vw">
<mat-label>Aadhar Card Number</mat-label>
<input matInput placeholder="Enter aadhar no" formControlName="aadhar" [(ngModel)]="customerr.aadhar">
<mat-hint style="color:red" *ngIf=" registerForm.get('aadhar').touched && registerForm.get('aadhar').errors?.required">Aadhar no is required</mat-hint>
</mat-form-field>
<br>
<mat-form-field appearance="outline" style="width:55vw">
<mat-label>PAN Card Number</mat-label>
<input matInput placeholder="Enter pan no" formControlName="pan" [(ngModel)]="customerr.pan">
<mat-hint style="color:red" *ngIf=" registerForm.get('pan').touched && registerForm.get('pan').errors?.required">PAN no is required</mat-hint>
</mat-form-field>
<br>
<br>
<mat-form-field appearance="outline" style="width:55vw">
<mat-label>Residential Address</mat-label>
<input matInput placeholder="Enter Address" formControlName="addr1" [(ngModel)]="customerr.residentialAddress">
<mat-hint style="color:red" *ngIf=" registerForm.get('addr1').touched && registerForm.get('addr1').errors?.required">Address is required</mat-hint>
</mat-form-field>
<br>
<!-- <mat-checkbox (click)="checked($event.target.checked)" formControlName="isSameAddress"> Is Permanent Address is same</mat-checkbox>
-->
<br>
<mat-form-field appearance="outline" style="width:55vw">
<mat-label>Permanent Address</mat-label>
<input matInput matInput placeholder="Enter Address" formControlName="addr2" [(ngModel)]="customerr.permanentAddress" >
<mat-hint style="color:red" *ngIf=" registerForm.get('addr2').touched && registerForm.get('addr2').errors?.required">Address is required</mat-hint>
</mat-form-field>
<br>
<mat-form-field appearance="outline" style="width:55vw">
<mat-label>State</mat-label>
<input matInput formControlName="state" placeholder="enter state name" [(ngModel)]="customerr.state">
<mat-hint style="color:red" *ngIf=" registerForm.get('state').touched && registerForm.get('state').errors?.required">State is required</mat-hint>
</mat-form-field>
<br>
<mat-form-field appearance="outline" style="width:55vw">
<mat-label>City</mat-label>
<input matInput formControlName="city" placeholder="enter city name" [(ngModel)]="customerr.city">
<mat-hint style="color:red" *ngIf=" registerForm.get('city').touched && registerForm.get('city').errors?.required">City is required</mat-hint>
</mat-form-field>
<br>
<mat-form-field appearance="outline" style="width:55vw">
<mat-label>Pincode</mat-label>
<input matInput formControlName="pincode" placeholder="enter pincode" [(ngModel)]="customerr.pinCode">
<mat-hint style="color:red" *ngIf=" registerForm.get('pincode').touched && registerForm.get('pincode').errors?.required">pincode is required</mat-hint>
</mat-form-field>
<br>
</mat-step>
<mat-step label="User Profile Login Details">
<br>
<mat-form-field appearance="outline"style="width:55vw">
<mat-label >Login Password</mat-label>
<input input type="password" matInput formControlName="password" placeholder="enter Password" [(ngModel)]="customerr.loginPassword">
</mat-form-field>
<br>
<mat-form-field appearance="outline"style="width:55vw">
<mat-label>Confirm Login Password</mat-label>
<input type="password" matInput placeholder="Verify Password" formControlName='verifyPassword' [errorStateMatcher]="errorMatcher">
<mat-error *ngIf="registerForm.hasError('passwordsDoNotMatch')">
Passwords do not match! Please Re-enter!
</mat-error>
</mat-form-field>
<div class="state">
Do passwords match?
<strong></strong>
</div>
<br>
<section>
<button mat-raised-button color="primary" > Submit</button>
</section>
</mat-step>
</mat-horizontal-stepper>
</form>
Ts file of the component
import { Component, OnInit } from '@angular/core';
import{FormGroup, FormControl, Validators, FormBuilder, FormGroupDirective, NgForm} from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';
import { Router } from '@angular/router';
import { Customerr } from '../Customerr';
import { LoginService } from '../login.service';
/** Error when the parent is invalid */
class CrossFieldErrorMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
return control.dirty && control.untouched && form.invalid;
}
}
@Component({
selector: 'app-stepper',
templateUrl: './stepper.component.html',
styleUrls: ['./stepper.component.css']
})
export class StepperComponent implements OnInit {
customerr:Customerr= new Customerr();
errorMatcher = new CrossFieldErrorMatcher();
registerForm: FormGroup;
passwordValidator(form: FormGroup) {
const condition = form.get('password').value !== form.get('verifyPassword').value;
return condition ? { passwordsDoNotMatch: true} : null;
}
constructor(private fb:FormBuilder, private service:LoginService, private router:Router) { }
ngOnInit(){
this.registerForm = this.fb.group({
// isSameAddress:[false],
email: new FormControl('', [Validators.required, Validators.email]),
fullname:['', Validators.required],
age:['', Validators.required],
fname:['', Validators.required],
mobileNumber: ['', [Validators.required, Validators.pattern("^((\\+91-?)|0)?[0-9]{10}$")]],
state:['',Validators.required],
city:['',Validators.required],
landmark:['',Validators.required],
occ:['',Validators.required],
soi:['',Validators.required],
gi:['',Validators.required],
addr1:['',Validators.required],
addr2:['',Validators.required],
aadhar:['',[Validators.required,Validators.pattern("^[2-9]{1}[0-9]{3}\\s[0-9]{4}\\s[0-9]{4}$")]],
pan:['',[Validators.required,Validators.pattern("[A-Z]{5}[0-9]{4}[A-Z]{1}")]],
pincode:['',Validators.required],
password: ['', Validators.pattern("^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$")],
verifyPassword: ['',Validators.pattern("^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$")]
}, {
validator: this.passwordValidator
})
}
register(){
this.service.registerUser(this.customerr).subscribe(
customerPersisted=>{ console.log( customerPersisted);
}
);
}
// checked(value:boolean){
// if(value){
// this.registerForm.controls.addr1.setValue(this.registerForm.value.addr2);
// //this.registerForm.controls.addr2.setValue(this.registerForm.value.addr1)
// }else{
// this.registerForm.controls.addr1.setValue(undefined);
// this.registerForm.controls.addr2.setValue(undefined)
// }
// }
}
```
Aucun commentaire:
Enregistrer un commentaire