问题描述
经常在网页上创建表单时，我需要我们的客户填写一个字段，例如永久地址，以及当前地址（选中复选框后会自动填写当前地址）。我已经搜索过不同的方法，但找不到在角度材料组件中实现这一点的具体方法
<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>{{!registerForm.hasError('passwordsDoNotMatch')}}</strong>
</div>
<br>
<section>
<button mat-raised-button color="primary" > Submit</button>
</section>
</mat-step>
</mat-horizontal-stepper>
</form>
组件的Ts文件
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:['',fname:['',mobileNumber: ['',Validators.pattern("^((\\+91-?)|0)?[0-9]{10}$")]],state:['',city:['',landmark:['',occ:['',soi:['',gi:['',addr1:['',addr2:['',aadhar:['',Validators.pattern("^[2-9]{1}[0-9]{3}\\s[0-9]{4}\\s[0-9]{4}$")]],pan:['',Validators.pattern("[A-Z]{5}[0-9]{4}[A-Z]{1}")]],pincode:['',password: ['',Validators.pattern("^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$")],verifyPassword: ['',}$")]
},{
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)
// }
// }
}
```
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）