Как сбросить реактив Angular Форма материала в Angular?

Question

Я пытаюсь сбросить реактивную форму, созданную Angular Материал (кроме флажка). Я пытался использовать this.formdata.reset(). Это сбрасывает форму, но делает ее touched. Так что я использовал this.formdata.markAsUntouched(), но это ничего не меняет. Вот мой код ниже:

app.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, Validators, FormArray, FormControl, NgForm } from '@angular/forms';

export class FormComponent implements OnInit{

  public states = [];

  Gender: model[] = [{value: 'M', option: 'Male'}, {value: 'F', option: 'Female'}];
  Vehicles: model[] = [{value: '2 wheelers', option: '2 wheelers'}, {value: '4 wheelers', option: '4 wheelers'}];

  constructor(private _statesService: StatesService, private fb: FormBuilder) {}

  // Initialize each field of form with FormBuilder
  formdata = this.fb.group({
    name: ['', [Validators.required, Validators.minLength(3)]], phone: ['', [Validators.required, Validators.minLength(12)]],
    gender: ['', Validators.required], vehicles: new FormArray([],Validators.required)
  });

  // Retreiving values of form field
  get Name()
  {return this.formdata.get('name');}

  get Phone()
  {return this.formdata.get('phone');}

  get Vehiclesmethod()
  {return this.formdata.get('vehicles');}

  get Genderval()
  {return this.formdata.get('gender');}

  onCheckChange(event) {
    const formArray: FormArray = this.formdata.get('vehicles') as FormArray;

    /* Selected */
    if(event.target.checked){
      // Add a new control in the arrayForm
      formArray.push(new FormControl(event.target.value));
    }
    /* unselected */
    else{
      // find the unselected element
      let i: number = 0;

      formArray.controls.forEach((ctrl: FormControl) => {
        if(ctrl.value == event.target.value) {
          // Remove the unselected element from the arrayForm
          formArray.removeAt(i);
          return;
        }
        i++;
      });
    }
  }
  @ViewChild('f') private f: NgForm;
  // Submit method
  onSubmit()
  {
    if(this.formdata.invalid){return ;}
    console.log(this.formdata.value);
    alert('submitted');
    // Reset form
    this.formdata.reset();
    this.formdata.markAsUntouched();
  }
}

app.component. html

<form [formGroup]="formdata" (ngSubmit)="onSubmit()" #f="ngForm"> 
            <div class="form-row">
                <div class="col">
                    <p>
                        <mat-form-field appearance="outline" class="field_size">
                            <mat-label>Name</mat-label>
                            <input type="text" matInput formControlName="name">
                            <mat-error *ngIf="Name.errors?.required">Name required</mat-error>
                            <mat-error *ngIf="Name.errors?.minlength">Minimum 3 characters required</mat-error>
                        </mat-form-field>
                    </p>
                </div>
                <div class="col">
                    <p>
                        <mat-form-field appearance="outline" class="field_size">
                            <mat-label>Phone Number</mat-label>
                            <input type="tel" matInput appPhoneMask formControlName="phone" maxlength="12">
                            <mat-error *ngIf="Phone.errors?.required">Phone number required</mat-error>
                            <mat-error *ngIf="Phone.errors?.minlength">Number is less than 10 digits</mat-error>
                        </mat-form-field>
                    </p>
                </div>
            </div>

            <div class="form-row">
                <div class="col">
                    <label>Gender</label><br>
                    <mat-radio-group formControlName="gender">
                        <mat-radio-button *ngFor="let g of Gender; let i = index" [value]="g.value">{{ g.option }}</mat-radio-button>
                    </mat-radio-group><br>
                    <small *ngIf="Genderval.errors?.required" style="color: red;">Please select Gender</small>
                </div>
                <div class="col">
                    <label>Vehicles</label><br>
                    <div class="form-inline">
                        <span class="custome-control custom-checkbox mr-sm-2" *ngFor="let v of Vehicles,let i=index">
                            <input type="checkbox" class="custom-control-input" id="{{i}}" [value]="v.value" (change)="onCheckChange($event)">
                            <label for="{{i}}" class="custom-control-label">{{v.option}}</label>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <button mat-flat-button color="primary" type="submit" class="button" [disabled]="!formdata.valid">Submit</button>
            </div>
        </form>

ПРИМЕЧАНИЕ: Значение очищается для всех полей в части FormBuilder, а также в части просмотра. Но флажок в отображаемой части все еще установлен.

Пожалуйста, помогите мне, я пробовал много способов, но ничего не работает нормально.

Answer 1

Вы должны использовать метод resetForm (). Поэтому вместо записи this.formdata.reset() пишите this.formdata.resetForm(), и вам не нужно использовать пометку AsUntouched

Источник: https://itnext.io/to-reset-a-form-or-to-resetform-555d3da47c52

Answer 2

Я не уверен, будет ли работать для всей формы, но определенно подходит для каждого FormControl. Вам нужно указать в опциях место, чтобы не генерировать событие после изменений.

this.formdata.reset('', {emitEvent: false});

после этого, если ваша форма все еще помечена как затронутая, попробуйте решение + проверьте изменения формы:

constructor(private cd: ChangeDetectorRef) {}

this.formdata.markAsUntouched();
this.cd.detectChanges();