提交后重置 ngForm 在 Angular 9 中不起作用

Question

<form #incomeForm="ngForm" (ngSubmit)="incomeForm.valid && onSubmit(incomeForm)">
<input type="hidden" class="form-control" name="_id" #name="ngModel"
[(ngModel)]="incomeservice.selectedIncome._id">
<div class="row">
<div class="col-md-6 pr-1">
<div class="form-group disable">
<label>Company (disabled)</label>
<input type="text" class="form-control"
name="company" #company="ngModel"
[(ngModel)]="incomeservice.selectedIncome.company">
</div>
</div>
<div class="col-md-6 px-1">
<div class="form-group">
<label>Service</label>
<input type="text" class="form-control" placeholder="Enter Service details"
required name="service" #service="ngModel"
[(ngModel)]="incomeservice.selectedIncome.service">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 pr-1">
<div class="form-group">
<label>Bank charge</label>
<input type="number" class="form-control" placeholder="Enter Bank Charge"
value=0 name="bankcharge" #bankcharge="ngModel"
[(ngModel)]="incomeservice.selectedIncome.bankcharge">
</div>
</div>
<div class="col-md-4 pl-1">
<div class="form-group">
<label>Service Charge</label>
<input type="number" class="form-control" placeholder="Enter Service Charge"
value=0 required name="servicecharge" #company="ngModel"
[(ngModel)]="incomeservice.selectedIncome.servicecharge">
</div>
</div>
<div class="col-md-4 pl-1">
<div class="form-group">
<label>Bank Service Charge (if any)</label>
<input type="number" class="form-control"
placeholder="Enter Bank Service Charge" value=0 name="bankservicecharge" #bankservicecharge="ngModel"
[(ngModel)]="incomeservice.selectedIncome.bankservicecharge">
</div>
</div>
</div>
<div class="row">
<div class="update ml-auto mr-auto">
<button type="submit" [disabled]="!incomeForm.valid" class="btn btn-primary btn-round">Save</button>
</div>
</div>
</form>

import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router'
import { IncomeService } from '../../shared/income.service';
import { NgForm } from '@angular/forms';

@Component({
selector: 'app-income',
templateUrl: './income.component.html',
styleUrls: ['./income.component.css'],
providers: [IncomeService]
})
export class IncomeComponent implements OnInit {
constructor(public incomeservice: IncomeService, private router:Router) { }
ngOnInit(): void {
}
resetForm(form: NgForm) {
form.resetForm();
this.incomeservice.selectedIncome={
_id: "",
company: "Akshaya Paral",
service: "",
bankcharge: 0,
servicecharge: 0,
bankservicecharge: 0,
};
}
onSubmit(form: NgForm) {
// console.log(form.value);
this.incomeservice.postIncome(form.value).subscribe((response) => {
this.resetForm(form);
});
}
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import 'rxjs/operators';
import { environment } from '../../environments/environment';
import {  Income } from './income.model';

@Injectable()
export class IncomeService {
selectedIncome: Income={
_id: "",
company: "Company Name",
service: "",
bankcharge: 0,
servicecharge: 0,
bankservicecharge: 0,
}
income: Income[];
// readonly baseURL = 'http://localhost:4000/income';
constructor(private http: HttpClient) { }
postIncome(inc : Income){
return this.http.post(environment.incomebaseURL+'/add', inc);
}

}

export class Income {
_id: string;
company: string;
service: string;
bankcharge: number;
servicecharge:number;
bankservicecharge:number;
}

我已经在app.module.ts中包含所有必要的软件包和文件 代码在将数据提交到后端时工作正常。但是提交后我无法重置页面。而且我有一个公司的默认值，重置后该值会关闭，因此我无法提交另一个请求，因为它是必需的。

Answer 1

调用ngOnInit()函数而不是重置表单。它会完美地工作