nb-select on nb-stepper 给出错误-表单提交被取消,因为表单未连接(NgxAdmin)
nb-select on nb-stepper giving error- Form submission canceled because the form is not connected (NgxAdmin)
由于 nb-select,在我的步进器中移动到下一步时出现错误(表单提交被取消,因为表单未连接)。我有一种感觉,nb-option“值”没有正确链接 formControlName(有点像错误所说的那样)。我使用 FormBuilder 和 FormGroups。我已经阅读了很多,但看不出是什么原因造成的。
nb-select代码
<nb-select formControlName="defaultTechnicianId" *ngIf="technicianList" fullWidth="true"
placeholder="Select a Technician">
<nb-option *ngFor="let technician of technicianList" value="technician.id">
{{technician.firstName}}
</nb-option>
</nb-select>
表单代码
<nb-step [stepControl]="createForm" label="Create">
<form [formGroup]="createForm" (ngSubmit)="onCreatePlannedMaintenance()" class="step-container">
<div class="row">
<div class="col-sm-12">
<label for="inputUser" class="label col-sm-12 form-control-label">Default Technician</label>
<nb-select formControlName="defaultTechnicianId" *ngIf="technicianList" fullWidth="true"
placeholder="Select a Technician">
<nb-option *ngFor="let technician of technicianList" value="technician.id">
{{technician.firstName}}
</nb-option>
</nb-select>
</div>
</div>
<button nbButton nbStepperNext>next</button>
</form>
表单设置代码
this.createForm = this.formBuilder.group({
name: ['', Validators.required],
defaultTechnicianId: ['', Validators.required],
});
提交代码
onCreatePlannedMaintenance() {
this.createForm.markAsDirty();
if (this.createForm.invalid) {
return;
}
this.plannedMaintenance = this.createForm.value;
this.dataService.put(this.plannedMaintenance).subscribe(data => {
this.plannedMaintenance = data;
});
}
我了解到这可能是旧版星云包的问题(我使用的是 4.1.2)。可能不是星云本身,而是星云和反应形式共同造成的。
简单的解决方法就是在 Stepper Next 按钮上添加一个点击事件,例如
<button nbButton nbStepperNext (click)="onCreatePlannedMaintenance()">next</button>
由于 nb-select,在我的步进器中移动到下一步时出现错误(表单提交被取消,因为表单未连接)。我有一种感觉,nb-option“值”没有正确链接 formControlName(有点像错误所说的那样)。我使用 FormBuilder 和 FormGroups。我已经阅读了很多,但看不出是什么原因造成的。
nb-select代码
<nb-select formControlName="defaultTechnicianId" *ngIf="technicianList" fullWidth="true"
placeholder="Select a Technician">
<nb-option *ngFor="let technician of technicianList" value="technician.id">
{{technician.firstName}}
</nb-option>
</nb-select>
表单代码
<nb-step [stepControl]="createForm" label="Create">
<form [formGroup]="createForm" (ngSubmit)="onCreatePlannedMaintenance()" class="step-container">
<div class="row">
<div class="col-sm-12">
<label for="inputUser" class="label col-sm-12 form-control-label">Default Technician</label>
<nb-select formControlName="defaultTechnicianId" *ngIf="technicianList" fullWidth="true"
placeholder="Select a Technician">
<nb-option *ngFor="let technician of technicianList" value="technician.id">
{{technician.firstName}}
</nb-option>
</nb-select>
</div>
</div>
<button nbButton nbStepperNext>next</button>
</form>
表单设置代码
this.createForm = this.formBuilder.group({
name: ['', Validators.required],
defaultTechnicianId: ['', Validators.required],
});
提交代码
onCreatePlannedMaintenance() {
this.createForm.markAsDirty();
if (this.createForm.invalid) {
return;
}
this.plannedMaintenance = this.createForm.value;
this.dataService.put(this.plannedMaintenance).subscribe(data => {
this.plannedMaintenance = data;
});
}
我了解到这可能是旧版星云包的问题(我使用的是 4.1.2)。可能不是星云本身,而是星云和反应形式共同造成的。
简单的解决方法就是在 Stepper Next 按钮上添加一个点击事件,例如
<button nbButton nbStepperNext (click)="onCreatePlannedMaintenance()">next</button>