【问题标题】:Reset a form group on button click in Angular 6(Responsive form)?在Angular 6(响应式表单)中单击按钮时重置表单组?
【发布时间】:2019-03-08 07:00:17
【问题描述】:

我试图在单击按钮后清除表单值。 下面显示了 HTML 和 Angular 组件。在同一个按钮上单击我希望重置或刷新值。 谢谢。

 onAddClientNeeds() {
        
        this.listOfNeedsAssessment.push(this.needsAssessment.value);
        this.isNeedsAssessmentAdded = true;
    }
<div [formGroup]="needsAssessment" class="main-container">
    <div class="header-section">
    <div class="flex-container">
        
            <div class="edit-section">
                <p class="edit-title">Mental Health</p>
                <div class="edit-body">
                    <select class="form-control" (change)="onchange($event)" (blur)="onchange($event)" id="mental_health">
                        <option selected value="0">Select Option</option>
                        <option *ngFor="let mentalHealth of mentalHealthList" value={{mentalHealth.Id}}>{{mentalHealth.Item}}</option>
                    </select>
                </div>
            </div>
            <div class="edit-section">
                <p class="edit-title">Persistant Pain</p>
                <div class="edit-body">
                    <select class="form-control" (change)="onchange($event)" (blur)="onchange($event)" id="persistant_pain">
                        <option selected value="0">Select Option</option>
                        <option *ngFor="let persistantPain of persistantPainList" value={{persistantPain.Id}}>{{persistantPain.Item}}</option>
                    </select>
                </div>
            </div>
            
        <div class="button-select">
            <button type="button" class="create-button" (click)="onAddClientNeeds()">Add Needs Assessment Outcomes</button>
        </div>
    </div>
</div>

【问题讨论】:

  • 响应式表单?

标签: angular forms button refresh reset


【解决方案1】:

只需调用函数reset()

onAddClientNeeds() {
  if (this.needsAssessment.valid) {
    this.needsAssessment.reset();     
  }
}

【讨论】:

    【解决方案2】:

    onAddClientNeeds(){ this.needAssessment.reset();}

    【讨论】:

    • 您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息,例如引用或文档,以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-13
    • 2020-05-09
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多