web-dev-qa-db-fra.com

Comment puis-je réinitialiser Angular Reactive Form

J'ai essayé et échoué à trouver la façon de réinitialiser mon formulaire angular.

Quelqu'un peut-il aider?

<form #thisIsAForm>
  <mat-form-field class="full-width">
    <input matInput placeholder="Weather">
  </mat-form-field>
</form>
<button mat-raised-button (click)="resetForm()">Reset</button>

export class Example{
  @ViewChild('thisIsAForm') thisIsAForm;

  resetForm() {
    this.thisIsAForm.reset();
  }
}
angularangular-reactive-forms
7
physicsboy

Presque ! Utilisez une forme réactive pour cela:

<form [formGroup]="myForm">
  <mat-form-field class="full-width">
    <input matInput placeholder="Weather" formControlName="weather">
  </mat-form-field>
</form>
<button mat-raised-button (click)="myForm.reset()">Reset</button>


export class Example{
  myForm: FormGroup;

  constructor(private fb: FormBuilder) { 
    this.myForm = fb.group({
      weather: ''
    });
  }

  // If the HTML code doesn't work, simply call this function
  reset() {
    this.myForm.reset();
  }
}
19
user4676340
<form [formGroup]="thisIsAForm" (ngSubmit)="onSubmit()">
  <mat-form-field class="full-width">
    <input formControlName="weather" placeholder="Weather">
  </mat-form-field>
</form>
<button mat-raised-button (click)="resetForm()">Reset</button>


export class Example{
  thisIsAForm: FormGroup;

  constructor() {
    this.thisIsAForm = new FormGroup(
      weather: new FormControl('')
    ); 
  }

  resetForm() {
    this.thisIsAForm.reset();
  }
}
2
axl-code

Ici, je réinitialise le formulaire géré par modèle sans salir le formulaire.

    <form class="example-form" #charreplaceform="ngForm">
          <mat-form-field class="example-full-width">
            <input matInput #codepointSel="ngModel" (change)="createReplacementChar()" (keyup)="checkForNumber()"
              required [(ngModel)]="charReplaceInfo.codePoint" name="code-point" placeholder="Code Point (Only number)"
              [disabled]="isDisabled">
          </mat-form-field>

          <a (click)="refreshCharRecord(charreplaceform)">
            <i class="material-icons">
              loop
            </i>
          </a>
    </form>

    // in .ts
    refreshCharRecord(form: NgForm) { // getting the form reference from template 
    form.form.reset();   // here we are resetting the form without making form dirty
  }
0
Shreesh Mishra

Dans Angular 8, si vous faites

<form #form="ngForm" (ngSubmit)="process(form)">

process(form: NgForm) { ...

Vous obtiendrez l'erreur suivante lorsque vous générez avec --prod

L'argument de type "FormGroupDirective" n'est pas attribuable au paramètre de type "NgForm".

sur (ngSubmit)

Ce que j'ai fait était d'injecter form référence de modèle en tant que FormGroupDirective puis d'appeler resetForm().

<form #form (ngSubmit)="process(form)">

@ViewChild('form', { static: false }) FormGroupDirective formDirective;

Voir FormGroupDirective

0
Chuk Lee