Issue
I am encountering a problem where I am not utilizing a form, but rather using the Model values to populate a select list. Upon clicking the submit button, an API is called with the selected model value. However, after the submission, the select list retains the previous values. How can I reset it to display the initial state?
Component
import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { AuthorizeUserDirective } from '../../directives/authorize-user.directive';
import { ProductService } from '../../services/product.service';
import { Observable } from 'rxjs/Observable';
import { AuthService } from '../../services/auth/auth.service';
import { PaginatePipe, PaginationControlsCmp, PaginationService, IPaginationInstance } from 'ng2-pagination';
import { LoadingComponent } from '../../../app/components/loading.component';
import { WorkflowComponent } from '../api/workflow.component';
import { ApiService } from '../../services/api.service';
import { ProductModel } from '../../models/product.model';
import { Api } from '../../models/api.model';
import { Scope } from '../../models/scope';
import { Workflow } from '../../models/workflow';
import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
import { WorkflowService } from '../../services/workflow.service';
@Component({
selector: 'product-detail',
templateUrl: '../../app/components/product/product-detail.html',
providers: [PaginationService]
})
export class ProductEditComponent implements OnInit {
@ViewChild('modal')
modal: ModalComponent;
api: Api;
apiDescription: string;
apiServiceUrl: string;
wf: Array<Workflow>;;
sc: Array<Scope>;;
private isEmpty: boolean = true;
private apiName: string;
private isAdmin: Boolean = false;
private data: ProductModel;
private id: string;
isAuthorized: boolean = false;
private status: string;
scopeid: number;
workflowid: number;
public config: IPaginationInstance = {
id: 'custom',
itemsPerPage: 10,
currentPage: 1
};
private response: Observable<any[]>;
constructor(private router: Router,
private productService: ProductService,
private apiService: ApiService,
private route: ActivatedRoute,
private authService: AuthService) {
this.route.params.subscribe(params => {
this.id = params['id'];
});
this.status = 'loading';
}
ngOnInit() {
this.productService.getProductById(this.id);
this.data = this.productService.singleProduct;
this.productService.getAllWorkflow()
.subscribe(data => this.wf = data);
this.productService.getAllScope()
.subscribe(data => this.sc = data);
this.status = 'active';
if (this.data.Apis.length > 0) {
this.isEmpty = false;
}
}
save(api) {
this.apiService.saveApi(api,this.scopeid, this.workflowid)
.subscribe(data => {
this.response = data;
},
error => {
console.log("error while saving scope and workflow");
});
}
getApi(apiId) {
this.productService.getApiById(apiId);
this.api = this.productService.api;
this.apiName = this.productService.api.Name;
this.apiDescription = this.productService.api.Description;
this.apiServiceUrl = this.productService.api.ServiceUrl;
this.modal.open();
}
onChangeworkflow(deviceValue) {
this.workflowid = deviceValue;
}
onChangeScope(deviceValue1) {
this.scopeid = deviceValue1;
}
}
HTML
<modal #modal>
<modal-header [show-close]="true">
<h4 class="modal-title">{{apiName}}</h4>
</modal-header>
<modal-body>
<div class="row">
<div class="col-md-12">
<!-- Reg-Form -->
<div id="sky-form4" class="sky-form" style="border:0px;">
<div class="row" *ngIf="apiServiceUrl">
<section class="col-xs-3">
<label>
URL :
</label>
</section>
<section class="col-xs-9">
<label>
{{apiServiceUrl}}
</label>
</section>
</div>
<div class="row" *ngIf="apiDescription">
<section class="col-xs-3">
<label>
Description :
</label>
</section>
<section class="col-xs-9">
<label>
{{apiDescription}}
</label>
</section>
</div>
<section>
<label class="select" (change)="onChangeworkflow($event.target.value)">
<select>
<option *ngFor="let w of wf" [value]="w.Id">{{w.Name}}</option>
</select>
<i></i>
</label>
</section>
<section>
<label class="select" (change)="onChangeScope($event.target.value)">
<select>
<option *ngFor="let s of sc" [value]="s.Id">{{s.ScopeName}}</option>
</select>
<i></i>
</label>
</section>
</div>
<!-- End Reg-Form -->
</div>
</div>
<api-workflow></api-workflow>
</modal-body>
<modal-footer>
<button type="button" class="btn-u btn-u-default" data-dismiss="modal" style="margin-right:5px;" (click)="modal.dismiss();">Close</button>
<button type="submit" class="btn-u pull-right" (click)="save(api)" data-dismiss="modal">Save</button>
</modal-footer>
</modal>