How to set form controls dirty or touched in Angular2? - forms

Question

Hi I am developing web application in angular2. I have form in popup. On closing popup I want to reset all the fields. For example, If required error occurs then if i close and reopen the modal then same error message will be there. On closing popup error message should also go. Below is my html code.
<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()">×</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;">❌ 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>
Below is ts file.
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;
}
In the .Ts file i have around 500 lines of code. But I have not added all code here.
On close() I want to reset the form controls. Can someone help me to fix? Thanks