如何在Angular2中设置脏的或触摸的表单控件？

Question

您好我正在开发angular2中的Web应用程序。我有弹出窗体。在关闭弹出窗口时，我想重置所有字段。例如，如果发生必需的错误，那么如果我关闭并重新打开模态，则会出现相同的错误消息。关闭弹出错误消息也应该去。下面是我的HTML代码。

    <div *ngIf="isPopupOpen()" [ngClass]="{'modal-pop-close': _isClose}" id="myModal"  class="modal-pop">
                <!-- Modal content -->
                <div class="modal-content-pop">
                    <span class="close"  (click)="close()">&times;</span>
                    <h4 class="modal-title pull-left center-text"><i></i> New User</h4>
                    <form *ngIf="formResetToggle" class="form-horizontal" name="useronboardEditorForm" #f="ngForm" novalidate
                          (ngSubmit)="f.form.valid ? save() :
                      (!username.valid && showErrorAlert('User name is required', 'Please enter user name'));">

                        <div class="form-group-btn">
                            <label for="username" class="user-name">User Name</label>
                            <br />
                                <input [ngClass]="{'has-success': f.submitted && username.valid, 'has-error1' : f.submitted && !username.valid}"
                                       [(ngModel)]="asyncSelected"
                                       [typeahead]="dataSource"
                                       (typeaheadLoading)="changeTypeaheadLoading($event)"
                                       (typeaheadNoResults)="changeTypeaheadNoResults($event)"
                                       (typeaheadOnSelect)="typeaheadOnSelect($event)"
                                       [typeaheadOptionsLimit]="2"
                                       typeaheadOptionField="userName"
                                       [typeaheadMinLength]="3"
                                       placeholder="Search Users"
                                       [disabled]="false"
                                       class="form-controlBtn usernameBtn" type="text" name="username" autocomplete="off" #username="ngModel" required >
                                <div *ngIf="typeaheadLoading===true" style="margin-left:174px;">Loading</div>
                                <div *ngIf="typeaheadNoResults===true" style="margin-left:174px;">&#10060; No Results Found</div>
                                <span *ngIf="f.submitted" class="glyphicon form-control-feedback" [ngClass]="{'glyphicon-ok ':username.valid, 'glyphicon-remove' : !username.valid}"></span>
                                <br />

                                <span *ngIf="f.submitted && !username.valid" class="errorMessageText">
                                    User Name Required!
                                </span>

                            <!--</div>-->
                            </div>
                            <div>
                                <div>
                                    <button type="submit" class="btn-primary">Add User</button>
                                </div>
                            </div>
                            <div class="clearfix"></div>
</form>
                </div>
            </div>

下面是ts文件。

import { FormsModule, NgForm } from "@angular/forms";
@Component({
    selector: 'onboard-editor',
    templateUrl: './onboard-editor.component.html',
    styleUrls: ['./onboard-editor.component.css']
})
export class OnBoardEditorComponent  implements OnInit  {


  ngOnInit() {
        this.loadUsers();
        this.loadingIndicator = true;
        let gT = (key: string) => this.translationService.getTranslation(key);
        this.columns = [
            { prop: "index", name: '#', width: 30, headerTemplate: this.statusHeaderTemplate, cellTemplate: this.statusTemplate, resizeable: false, canAutoResize: false, sortable: false, draggable: false },
            { prop: 'username', name: 'User Name', cellTemplate: this.nameTemplate, width: 200 },
            { prop: 'emailaddress', name: 'Email Address', cellTemplate: this.nameTemplate, width: 200 },
            { prop: 'isallowed', name: 'Allow/Deny', cellTemplate: this.toggleAllowDenyTemplate, width: 200 },
            { name: '', width: 80, cellTemplate: this.actionsTemplate, resizeable: false, canAutoResize: false, sortable: false, draggable: false }
        ];

    }
    close() {
        this._isClose = true;
    }

在.Ts文件中，我有大约500行代码。但是我没有在这里添加所有代码。

关闭（）我想重置表单控件。有人可以帮我解决吗？感谢