提交后重置 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() function 而不是重置表單。它會完美運行