我试图使验证器的密码和确认密码,但我总是结束这个错误推拿:
ERROR TypeError: Cannot read property 'companyForm' of undefined
at checkPassword (add-company.component.ts:49)
at forms.js:1599
at Array.map (<anonymous>)
at _executeValidators (forms.js:1595)
at FormControl.validator (forms.js:1537)
at FormControl._runValidator (forms.js:4347)
at FormControl.updateValueAndValidity (forms.js:4308)
at new FormControl (forms.js:4920)
at FormBuilder.control (forms.js:9481)
at FormBuilder._createControl (forms.js:9541)
我试着在网上寻找这个问题,我发现其他人也面临同样的问题,当我尝试他们得到的解决方案时,我仍然不适合我。
add-company.components.ts:
import {Component, Input, OnInit} from '@angular/core';
import {AdminService} from "../../../service/admin.service";
import {LoginService} from "../../../service/login.service";
import {AbstractControl, FormBuilder, FormGroup, Validators} from "@angular/forms";
import {Company} from "../../../models/company";
@Component({
selector: 'app-add-company',
templateUrl: './add-company.component.html',
styleUrls: ['./add-company.component.css']
})
export class AddCompanyComponent implements OnInit {
allowed:boolean;
companyForm:FormGroup;
companies: Company[];
constructor(private adminService: AdminService, private loginService:LoginService, private fb: FormBuilder) { }
ngOnInit(): void {
this.companyForm = this.fb.group({
name:["", [Validators.required]],
email:["", [Validators.required,Validators.email]],
password:["", [Validators.required]],
passwordConfirm:["",[Validators.required, this.checkPassword]]
});
this.adminService.getAllCompanies(sessionStorage.token).subscribe(
(companies)=>{
for (let i = 0; i < companies.length; i++){
this.companies = companies;
}
}
);
if(sessionStorage.token != undefined){
this.loginService.identityCheck(sessionStorage.token).subscribe(
(identity)=>{
if(identity == "admin"){
this.allowed = true
}else{
this.allowed = false;
}
}
);
}
}
checkPassword(){
if(this.companyForm.controls['password'].value !=
this.companyForm.controls['passwordConfirm'].value){
this.companyForm.controls['passwordConfirm'].setErrors({passwordMismatch : true});
}
}
addCompany(){
if(this.companyForm.invalid){
return;
}
let newCompany: Company = new Company(0,
this.companyForm.controls['name'].value,
this.companyForm.controls['email'].value,
this.companyForm.controls['password'].value,[]
);
this.adminService.addCompany(sessionStorage.token,newCompany).subscribe(
(success)=>{
alert(success)
},
(err)=>{
alert(err.error)
}
)
}
}
add-company.components.html:
<div *ngIf="allowed">
<mat-horizontal-stepper>
<mat-step [stepControl]="companyForm">
<form [formGroup]="companyForm">
<ng-template matStepLabel>Fill out the company name</ng-template>
<mat-form-field>
<mat-label>Company Name</mat-label>
<input type="text" matInput placeholder="company name" formControlName="name" />
<!-- <mat-error *ngIf="allowed"> error</mat-error>-->
<!-- <mat-error *ngIf="companyForm.controls['name'].value == 'h'">err</mat-error>-->
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="companyForm">
<form [formGroup]="companyForm">
<ng-template matStepLabel>Fill out email and password</ng-template>
<mat-form-field>
<mat-label>Email Address</mat-label>
<input type="email" matInput placeholder="enter company email address" formControlName="email" required />
</mat-form-field>
<br/>
<mat-form-field>
<mat-label>Password</mat-label>
<input type="password" matInput placeholder="enter company password" formControlName="password" />
</mat-form-field>
<br/>
<mat-form-field>
<mat-label>confirm Password</mat-label>
<input type="password" matInput placeholder="confirm password" formControlName="passwordConfirm" required />
<mat-error *ngIf="companyForm.controls['passwordConfirm'].invalid
&& !companyForm.controls['passwordConfirm'].hasError('required')"
>confirm Password</mat-error>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
<p>You are now done, here are the company details please check before registering</p>
<p><b>company name:</b> {{companyForm.controls['name'].value}}</p>
<p><b>company email address:</b> {{companyForm.controls['email'].value}}</p>
<p><b>company password:</b> {{companyForm.controls['password'].value}}</p>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="addCompany()" >Register</button>
</div>
</mat-step>
</mat-horizontal-stepper>
</div>
<div *ngIf="!allowed">you are not allowed to view this section..</div>
谢谢所有的帮助!
此
丢失。 试试看
passwordConfirm:["",[Validators.required, () => this.checkPassword()]]
使用此代码此
关键字将引用您的组件实例