html - Angular 模式中的文本框显示先前的值

Question

在我的 Angular 模式中，我有一个下拉菜单、一个文本框和一个保存按钮。每当我在下拉列表中选择一个值时，在文本框中输入任何值并单击“保存”它就可以正常工作。但是再次打开该模型时，我在上次打开该模式时输入的文本框中看到了先前输入的值。

为什么会这样，解决方法是什么？

遵循 html:

<div bsModal #createSectionModal="bs-modal" class="modal fade" (onShown)="onShown()" tabindex="-1" role="dialog" aria-labelledby="createRoleModal" aria-hidden="true" [config]="{backdrop: 'static'}">
<div class="modal-dialog">
    <div #modalContent class="modal-content">
        <form *ngIf="active" #createSectionForm="ngForm" id="frm_create_section" novalidate (ngSubmit)="save()">
            <div class="modal-header">
                <button type="button" class="close" (click)="close()" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">
                    <span>Create New Section</span>
                </h4>
            </div>
            <div class="modal-body">
                <div class="row clearfix">
                    <div class="col-sm-12">
                        <div class="form-group form-float">
                            <div class="form-line">
                                <select id="classname" required class="validate form-control" (change)="onClassChange($event)">
                                  <option value="?" selected="selected" novalidate></option>
                                  <option *ngFor="let class of classes | paginate: { id: 'server', itemsPerPage: pageSize, currentPage: pageNumber, totalItems: totalItems }" [value]="class.code">
                                   {{class.name}}
                                  </option>

                                </select>  
                                <label for="classname" class="form-label">Select Class</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row clearfix">
                  <div class="col-sm-12">
                      <div class="form-group form-float">
                          <div class="form-line">
                              <input id="name" name="name" type="text" [(ngModel)]="section.name"  required maxlength="32" minlength="1" class="validate form-control">
                              <label for="name" class="form-label">Section Name</label>
                          </div>
                      </div>
                  </div>
              </div>
            </div>

            <div class="modal-footer">
                <button [disabled]="saving" type="button" class="btn btn-default waves-effect" (click)="close()">
                    Cancel
                </button>
                <button [disabled]="!createSectionForm.form.valid || saving" type="submit" class="btn btn-primary waves-effect">
                    Save
                </button>
            </div>

        </form>
    </div>
</div>

在 typescript 文件中，我将数据与属性绑定(bind)，然后使用服务将该数据发送到发布请求。 typescript 代码

import { Component, OnInit, Injector, Output, EventEmitter, ViewChild, 
ElementRef } from '@angular/core';
import { AppComponentBase } from '@shared/app-component-base';
import { ModalDirective } from 'ngx-bootstrap';
import { Router } from '@angular/router';
import { SharedDataService } from '@shared/service-proxies/service-proxies';
import { CurriculumServiceProxy } from '@shared/service-proxies/service- 
 proxies';
 import { ClassDto, SectionDto,ListResultDtoOfCurriculumDto, 
  CreateSectionDto, CreateSectionResultDto, IListResultDtoOfCurriculumDto } 
  from '@shared/service-proxies/curriculumDtos';
  import { PagedListingComponentBase, PagedRequestDto } from 'shared/paged- 
 listing-component-base';


@Component({
selector: 'app-createsection',
templateUrl: './createsection.component.html',
styleUrls: ['./createsection.component.css']
})

 export class CreatesectionComponent extends AppComponentBase implements 
 OnInit {



@ViewChild('createSectionModal') modal: ModalDirective;
@ViewChild('modalContent') modalContent: ElementRef;

classes: ClassDto[] | undefined;
//subjects: SectionDto[] | undefined;
sections: SectionDto[] | undefined;
active: boolean;
saving: boolean;

section: CreateSectionDto = new CreateSectionDto();
sectionResult: CreateSectionResultDto = new CreateSectionResultDto();

@Output() modalSave: EventEmitter<any> = new EventEmitter<any>();

constructor(
injector: Injector,
private router: Router,
private _curriculumService: CurriculumServiceProxy,
private _sharedDataService: SharedDataService
) {
super (injector) 
}

onShown(): void {
$.AdminBSB.input.activate($(this.modalContent.nativeElement));
}

ngOnInit() {
this._curriculumService.getAllClassesWithDetail(this.appSession.tenant.tenancyName)
.finally(() => {this.saving = false;})
.subscribe((result: ListResultDtoOfCurriculumDto) => {
  this.classes = result.items;
})
}

save() : void {
this.saving = true;
this.section.schoolName = this.appSession.tenant.tenancyName;
this._curriculumService.CreateSection(this.section)
.finally(() => {
  this.saving = false;
})
.subscribe((result: CreateSectionResultDto) => {
  this.notify.info(this.l('Saved Successfully'));
  this.sectionResult = result;
  this.close();
  this.modalSave.emit(null);
})
}

show(): void {
this.active = true;
this.modal.show();
}

close(): void {
this.active = false;
this.modal.hide();
}

onClassChange(event) {
let selectedValue: string = event.target.value;
this.section.classCode = selectedValue;
}

}

Answer 1

您可以通过重置表单来修复它。这不是因为任何属性(property)都还活着，所以只要重置表格就可以了。您所要做的只是使用 ngSubmit 属性调用一个简单的重置函数，如下所示 (ngSubmit)="save(); createSectionForm.reset()"