如何清除我的 Angular 反应形式？

Posted 2023-03-05

【中文标题】如何清除我的 Angular 反应形式？

【英文标题】：How can I clear my Angular reactive form?

【发布时间】：2020-02-24 22:15:02

【问题描述】：

我的表单中有一个 mat-radio-group，我想清除单选按钮，以便我的测验应用程序中的每个新问题都没有选择任何内容。我该怎么做呢？这是我的表单的外观：

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
  <ol class="form-group">
    <mat-radio-group formControlName="answer" name="answer" (change)="radioChange($event.value)"
  (click)="question.selectedOption = option">
      <div class="radio-options" *ngFor="let option of question.options">
        <mat-radio-button class="option" [value]="option.optionValue" disableRipple="true"
          [checked]="question.selectedOption == option"
          [ngClass]="'is-correct': isCorrect(option.optionValue),
                  'is-incorrect': isIncorrect(option.optionValue)">
          <li> option.optionText </li>

【问题讨论】：

How can I reset Angular Reactive Form的可能重复

为什么要同时使用 ngForm 和 formgroup？如果您打算使用响应式表单，请删除 ngForm。

【参考方案1】：

您可以重置表单：

reset() 
    this.myForm.reset();
  

或

就像@miselking 提到的：只需重置特定控件（在本例中为“单选按钮”）。类似this.myForm.get('radioButtonControl').reset()

【讨论】：

或者只是重置特定控件（在本例中为“单选按钮”）。类似this.myForm.get('radioButtonControl').reset()

试过 this.quizForm.reset() ，它似乎没有工作。还尝试 this.quizForm.get('answer').reset() 并收到错误：错误 TS2339：属性 'get' 在类型 'NgForm' 上不存在。

@multiv123，您的代码中如何定义表单控件？如有可能，请核对姓名并分享代码，以供其他人查看和回答。

你也可以用这个：this.myForm.reset(answer: null);

【参考方案2】：

清除表单及其错误状态（脏、原始等）的最简单、最干净的方法

this.formName.reset();

有关表格读出的更多信息here

https://angular.io/docs/ts/latest/guide/forms.html

或

只需重置特定控件（在本例中为“单选按钮”）

this.myForm.get('radioButtonControl').reset()