我正在尝试使用有角的嵌套反应形式,并在每个字段上进行验证。提交表格后,我正在检查字段。如果有任何错误,则表单将显示它们并继续监听更改。现在,嵌套表单登录抛出“最大堆栈调用超出错误”。我知道这是因为浏览器一直在调用TS文件中定义的login()getter。谁能告诉我如何解决这个问题?
Error in console:
ERROR RangeError: Maximum call stack size exceeded
at VendorSignupComponent.get [as login] (vendor-signup.component.ts:53)
at VendorSignupComponent.get [as login] (vendor-signup.component.ts:54)
at VendorSignupComponent.get [as login] (vendor-signup.component.ts:54)
at VendorSignupComponent.get [as login] (vendor-signup.component.ts:54)
at VendorSignupComponent.get [as login] (vendor-signup.component.ts:54)
at VendorSignupComponent.get [as login] (vendor-signup.component.ts:54)
at VendorSignupComponent.get [as login] (vendor-signup.component.ts:54)
component.html:
<div class="container">
<form [formGroup]="vendorSignupForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-md-4">
<label for="name">Restaurant Name</label>
<input type="text" formControlName="name" class="form-control" pattern="[a-zA-z\\s]+" [ngClass]="{'is-invalid': submitted && f.name.errors}" />
<div *ngIf="submitted && f.name.errors" class="invalid-feedback">
<div *ngIf="f.name.errors.required">Name is required</div>
<div *ngIf="f.name.errors.pattern">Not a valid name!</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-md-4">
<label for="emailId">Email</label>
<input type="email" formControlName="emailId" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.emailId.errors }" />
<div *ngIf="submitted && f.emailId.errors" class="invalid-feedback">
<div *ngIf="f.emailId.errors.required">Email is required</div>
<div *ngIf="f.emailId.errors.email">Not a valid email!</div>
</div>
</div>
</div>
</div>
<div formGroupName="login">
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-md-4">
<label for="password">Password</label>
<input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && login.password.errors }" />
<div *ngIf="submitted && login.password.errors" class="invalid-feedback">
<div *ngIf="login.password.errors.required">Password is required</div>
<div *ngIf="login.password.errors.minlength">Password must be at least 8 characters</div>
<div *ngIf="login.password.errors.maxlength">Password cannot be more than 15 characters</div>
</div>
</div>
</div>
</div>
...
</div>
component.ts:
export class VendorSignupComponent implements OnInit {
submitted = false;
vendorSignupForm: FormGroup;
constructor(
private formBuilder: FormBuilder,
private router: Router
) {}
ngOnInit() {
this.vendorSignupForm = this.formBuilder.group({
name: ['', Validators.required],
emailId: ['', [Validators.required, Validators.email]],
openingTime: ['', Validators.required],
closingTime: ['', Validators.required],
minDeliveryTime: ['', Validators.required],
minOrder: ['', Validators.required],
mainCuisineType: ['', Validators.required],
imageUrl: ['', Validators.required],
numOfTables: ['', Validators.required],
category: ['', Validators.required],
vendorRegistrationId: ['', Validators.required],
vendorAddress: this.formBuilder.group({
street: ['', Validators.required],
city: ['', Validators.required],
pincode: ['', [Validators.required, Validators.minLength(6), Validators.maxLength(6)]],
state: ['', Validators.required],
phoneNumber: ['', [Validators.required, Validators.maxLength(10), Validators.minLength(10)]],
landlineNumber: [''],
}),
login: this.formBuilder.group({
password: ['', [Validators.required, Validators.minLength(8), Validators.maxLength(15)]],
role: ['vendor']
})
});
}
get f() {
return this.vendorSignupForm.controls;
}
get login() {
return this.login.controls;
}
get vendorAddress() {
return this.vendorAddress.controls;
}
onSubmit() {
this.submitted = true;
console.log(this.vendorSignupForm.value);
if (this.vendorSignupForm.invalid) {
return;
}
}
}
答案 0 :(得分:3)
System.out.println(x + " " + y);
的getter内的行this.login.controls
再次尝试调用相同的login
,因为您尝试访问getter
导致递归。而且this.login
也不会直接为您提供控件。您必须通过this.login.controls
来获取它,如下所示。
请考虑如下重构您的vendorSignupForm
获取器。
login