For example I have the ff fields below and uset add some inputs to it but I wanted to create a function to reset inputs from the fields or reset DealDispositionFormFields without settings each key value to null

Is there something like this.dealDispositionFormFields.reset() in angular ? or similar way to do it ? by the way I am not using formcontrols and form groups.Thanks.

I want to reset all values to null without doing it one by one

#sample object

{
    "dealName": null,
    "summary": null,
    "dealDispositionType": "Sale",
    "terminationPayment": "34234",
    "effectiveDate": "2021-10-26T16:00:00.000Z",
    "totalBrokerCommission": "234234"
}

#sample code

  class DealDispositionFormFields {
          dealName:string;
          summary:string;
          dealDispositionType: string;
          terminationPayment:number;
          effectiveDate: string;
          totalBrokerCommission: number;
          effectiveDateString: string;
          dealId: number;
    }
        
        @Component({
          selector: 'app-deal-idle-disposition',
          templateUrl: './deal-idle-disposition.component.html',
          styleUrls: ['./deal-idle-disposition.component.css']
        })
        export class DealIdleDispositionComponent implements OnInit {
               
                 ngOnInit(): void {   
                    this.dealDispositionFormFields = new DealDispositionFormFields();
                  }

#html code

 <div id="deal-form-container" *ngIf="isEditing">
            <div id="deal-form-wizard-top" *ngIf="dealDispositionFormFields.dealDispositionType === 'Buyout'">
              <mat-form-field appearance="fill">
                <mat-label>Deal Name</mat-label>
                <input 
                  matInput
                  [(ngModel)]="dealDispositionFormFields.dealName"
                  [required]="isExistingDeal">
              </mat-form-field>
              <mat-form-field appearance="fill">
                <mat-label>Summary of Deal</mat-label>
                <textarea 
                  matInput
                  class="resize-none"
                  [(ngModel)]="dealDispositionFormFields.summary"
                  [rows]="5"
                  [required]="isExistingDeal">
                </textarea>
              </mat-form-field>
              <mat-form-field appearance="fill">
                <mat-label>Termination Payment</mat-label>
                <input 
                  matInput
                  (keyup) = "computeBuyout()"
                  mask="separator.0" 
                  thousandSeparator=","
                  [allowNegativeNumbers]="false"
                  [(ngModel)]="dealDispositionFormFields.terminationPayment"
                  [required]="isExistingDeal">
                  <span matPrefix *ngIf="dealDispositionFormFields.terminationPayment">$</span>
              </mat-form-field>
              <mat-form-field appearance="fill">
                <mat-label>Effective Date</mat-label>
                  <input matInput
                    (dateChange)="computeBuyout()"
                    [matDatepicker]="effectiveDate" 
                    [(ngModel)]="dealDispositionFormFields.effectiveDate"
                    [required]="isExistingDeal">
                  <mat-datepicker-toggle matSuffix [for]="effectiveDate"></mat-datepicker-toggle>
                  <mat-datepicker #effectiveDate></mat-datepicker>
              </mat-form-field>
              <mat-form-field appearance="fill">
                <mat-label>Total Broker Commission</mat-label>
                <input 
                  matInput
                  (keyup) = "computeBuyout()"         
                  mask="separator.0" 
                  thousandSeparator=","
                  [allowNegativeNumbers]="false"
                  [(ngModel)]="dealDispositionFormFields.totalBrokerCommission"
                  [required]="isExistingDeal">
                  <span matPrefix *ngIf="dealDispositionFormFields.totalBrokerCommission">$</span>
              </mat-form-field>
            </div>
          </div>

CodePudding user response：

Wrap your all input elements inside form tag so that It will automatically creates a top-level FormGroup instance.

Update the form tag with a template reference variable, #form, and set its value as follows.

<form #form="ngForm" id="deal-form-container" *ngIf="isEditing">

Then we could get the NgForm instance inside component using ViewChild decorator

 @ViewChild(NgForm) form:NgForm;

Finally you can call reset method on form instance.

this.dealDispositionFormFields.reset();

Working Live Demo