Проблема

Я не использую форму, я просто использую значения модели и показываю в списке выбора, а затем после кнопки отправки я вызываю api и отправляю выбранное значение модели в api после отправки его загрузки с предыдущими значениями. как сбросить его, как показано ранее.

компонент

 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>  

При инициализации сделайте копию начальных значений.

После отправки обновите модели значениями из копии.