我正在使用一个响应式表单在我的组件中,它在我的开发环境中运行良好。但是,在生产构建时,我会收到FormGroup元素的错误提示。
Component.ts文件代码如下:
Component.ts文件代码如下:
ERROR in ClientApp\app\panel\applyLeave\applyLeave.component.html(86,36): : ApplyLeaveComponent类型上不存在'reportingPerson'属性。 ClientApp\app\panel\applyLeave\applyLeave.component.html(99,36): : ApplyLeaveComponent类型上不存在'notifyPerson'属性。 ClientApp\app\panel\applyLeave\applyLeave.component.html(114,86): : ApplyLeaveComponent类型上不存在'loading'属性。 ClientApp\app\panel\applyLeave\applyLeave.component.html(86,36): : ApplyLeaveComponent类型上不存在'reportingPerson'属性。 ClientApp\app\panel\applyLeave\applyLeave.component.html(99,36): : ApplyLeaveComponent类型上不存在'notifyPerson'属性。
export class ApplyLeaveComponent {
leaveForm: FormGroup;
ngOnInit() {
this.leaveForm = this.fb.group({
leaveType: ['', Validators.required],
leaveFromDate: ['', Validators.required],
leaveToDate: ['', Validators.required],
leaveReason: ['', Validators.required],
reportingPerson: ['', Validators.required],
notifyPerson: ['', Validators.required]
})
}
}
component.html:-
<form [formGroup]="leaveForm" class="row"
(ngSubmit)="applyLeave(leaveForm)">
<div class="form-group col-2">
<label for="" class="col-form-label">Leave type</label>
<div class="">
<select class="form-control form-control-sm"
formControlName="leaveType" required>
<option value="">Select</option>
<option *ngFor="let type of leaveType ;let i = index"
[value]="leaveType[i].id">{{type.type}}</option>
</select>
</div>
<div *ngIf="submitted && f.leaveType.errors"> <div
*ngIf="f.leaveType.errors.required" style="color:red ; font-
size:13px">* <span>Required</span></div></div>
</div>
<div class="form-group col-3">
<label for="" class="col-form-label">From Date</label>
<div class="input-group add-on">
<input class="form-control form-control-sm" placeholder="yyyy-mm-dd"
ngbDatepicker #d1="ngbDatepicker"
[minDate]="FromMinDate" formControlName="leaveFromDate" required >
<div class="input-group-btn col-4">
<button class="btn fa fa-calendar " (click)="d1.toggle()"
type="button"></button>
</div>
</div>
<div *ngIf="submitted && f.leaveFromDate.invalid"> <div
*ngIf="f.leaveFromDate.errors.required" style="color:red ; font-
size:13px">* <span>Required</span></div></div>
</div>
<div class="form-group col-3">
<label for="" class="col-form-label">To Date</label>
<div class="input-group add-on">
<input class="form-control form-control-sm" placeholder="yyyy-mm-dd"
ngbDatepicker #d2="ngbDatepicker"
[minDate]="ToMinDate" formControlName="leaveToDate" required>
<div class="input-group-btn col-4">
<button class="btn fa fa-calendar " (click)="d2.toggle()"
type="button"></button>
</div>
</div>
<div *ngIf="submitted && f.leaveToDate.invalid"> <div
*ngIf="f.leaveToDate.errors.required" style="color:red ; font-
size:13px">* <span>Required</span></div></div>
</div>
<div class="form-group col-4">
<label for="" class="col-form-label">Reporting person</label>
<div class="">
<ng-multiselect-dropdown [placeholder]="'Select'"
[data]="reportingPersonList"
[settings]="reportingdropdownSettings"
[(ngModel)]="reportingPerson"
formControlName="reportingPerson"
required>
</ng-multiselect-dropdown>
</div>
<div *ngIf="submitted && f.reportingPerson.invalid"> <div
*ngIf="f.reportingPerson.errors.required" style="color:red ; font-
size:13px">* <span>Required</span></div></div>
</div>
<div class="form-group col-4">
<label for="" class="col-form-label">Notify</label>
<div class="">
<ng-multiselect-dropdown [placeholder]="'Select'"
[data]="notifyList"
[settings]="dropdownSettings"
[(ngModel)]="notifyPerson"
formControlName="notifyPerson"
required>
</ng-multiselect-dropdown>
</div>
<div *ngIf="submitted && f.notifyPerson.invalid"> <div
*ngIf="f.notifyPerson.errors.required" style="color:red ; font-
size:13px">* <span>Required</span></div></div>
</div>
<div class="form-group col-5">
<label for="" class="col-form-label">Reason</label>
<div class="">
<textarea class="form-control form-control-sm"
formControlName="leaveReason" required></textarea>
</div>
<div *ngIf="submitted && f.leaveReason.invalid"> <div
*ngIf="f.leaveReason.errors.required" style="color:red ; font-
size:13px">* <span>Required</span></div></div>
</div>
<div class="col-3">
<button type="submit" class="btn btn-primary" name="submit"
id="leavebutton" [disabled]="loading">Apply</button>
</div>
</form>
我尝试使用类型为leaveForm:any=FormGroup;
的Formgroup,但这并没有解决问题。