Angular 即使在新表单组上，角度4表单值也未清除

我在Angular application中有一个form类，其代码如下：

import { 
  OnInit, 
  OnDestroy, 
  Injector 
}                                   from "@angular/core";
import { 
  FormBuilder, 
  FormGroup, 
  Validators 
}                                   from "@angular/forms";
import { 
  Observable, 
  Subscription 
}                                   from "rxjs";
import { inject }                   from "@angular/core/testing";

import { ActivatedRoute }           from '@angular/router';
import { TranslateService }         from 'ng2-translate';


import { AccessRoleSandbox }        from '../../role.sandbox';
import { AccessPermissionSandbox }  from '../../../permission/permission.sandbox';
import RoleForm                     from '../../models/role-form.model';
import Role                         from "../../models/role.model";
import Permission                   from "../../../permission/models/permission.model";

/**
 * Role form container class
 * 
 * @export
 * @class RoleFormContainer
 */
export class RoleFormContainer implements OnInit, OnDestroy{

  /**
   * Translate service
   * 
   * @protected
   * @type {TranslateService}
   * @memberof RoleFormContainer
   */
  protected translateService: TranslateService;

  /**
   * Form Builder
   * 
   * @protected
   * @type {FormBuilder}
   * @memberof RoleFormContainer
   */
  protected formBuilder: FormBuilder;

  /**
   * Activated route
   * 
   * @protected
   * @type {ActivatedRoute}
   * @memberof RoleFormContainer
   */
  protected route: ActivatedRoute;

  /**
   * Role create/update form
   * 
   * @type {FormGroup}
   * @memberof UpdateRoleContainer
   */
  public form: FormGroup;

  /**
   * Access role sandbox
   * 
   * @protected
   * @type {AccessRoleSandbox}
   * @memberof RoleFormContainer
   */
  protected accessRoleSandbox: AccessRoleSandbox;

  /**
   * Access permission sandbox
   * 
   * @protected
   * @type {AccessPermissionSandbox}
   * @memberof RoleFormContainer
   */
  protected accessPermissionSandbox: AccessPermissionSandbox;

  /**
   * Role ID
   * 
   * @private
   * @type {number}
   * @memberof UpdateRoleContainer
   */
  protected roleId: number;

  /**
   * All permissions object
   * 
   * @type {Array<any>}
   * @memberof CreateRoleContainer
   */
  public allPermissions: Array<any>;

  /**
   * Selected permissions
   * 
   * @type {Array<any>}
   * @memberof RoleFormContainer
   */
  public selectedPermissions: Array<any> = [];

  /**
   * Multiselect dropdown settings
   * 
   * @type {*}
   * @memberof CreateRoleContainer
   */
  public multiselectSettings: any;

  /**
   * Subscriptions
   * 
   * @type {Array<Subscription>}
   * @memberof RoleFormContainer
   */
  public subscriptions: Array<Subscription>;

  /**
   * Form title
   * 
   * @type {string}
   * @memberof RoleFormContainer
   */
  public formTitle: string;

  /**
   * Loading icon on submit button decider
   * 
   * @type {Observable<any>}
   * @memberof RoleFormContainer
   */
  public loadingObservable$: Observable<any>;

  /**
   * Creates an instance of RoleFormContainer.
   * 
   * @param {Injector} injector 
   * @memberof RoleFormContainer
   */
  constructor(
    injector: Injector
  ) {
      this.accessRoleSandbox        = injector.get(AccessRoleSandbox);
      this.accessPermissionSandbox  = injector.get(AccessPermissionSandbox);
      this.translateService         = injector.get(TranslateService);
      this.formBuilder              = injector.get(FormBuilder);
      this.route                    = injector.get(ActivatedRoute);

      this.createForm();
  }

  /**
   * On Init container
   * 
   * @memberof CreateRoleContainer
   */
  ngOnInit() {

  }

  /**
   * Unsubscribe from all Observables
   * 
   * @memberof CreateRoleContainer
   */
  public ngOnDestroy() {

  }

  /**
   * Register subscriptions
   * 
   * @memberof CreateRoleContainer
   */
  public registerSubscriptions() {
    const allPermissions$ = this.accessPermissionSandbox.permissions$;
    const viewingRole$    = this.accessRoleSandbox.viewingRole$;

    const routerSubscription = this.route.params.subscribe(params => {
      if(params && params.hasOwnProperty('id')) {
        this.roleId = params['id'];
        this.accessRoleSandbox.viewRole(this.roleId);
      }
    });

    const viewRoleSubscription = viewingRole$.switchMap(
      () => allPermissions$,
      (role: Role, perms: Array<Permission>) => {
        this.allPermissions = this.normalizePermissions(perms);
        return role;
      }
    ).subscribe(role => this.updateFormValues(role));

    this.subscriptions = [routerSubscription, viewRoleSubscription];
  }

  /**
   * Un-register subscriptions
   * 
   * @memberof RoleFormContainer
   */
  public unregisterSubscriptions() {
    this.subscriptions.forEach(sub => sub.unsubscribe());
  }

  /**
   * Create form
   * 
   * @memberof RoleFormContainer
   */
  private createForm() {
    this.form = this.getForm();
  }

  /**
   * Get form
   * 
   * @private
   * @returns {FormGroup} 
   * @memberof RoleFormContainer
   */
  private getForm(): FormGroup {
    return this.formBuilder.group({
      name:         ["", Validators.required],
      sort:         ["", Validators.required],
      status:       ["", Validators.required]
    });
  }

  /**
   * Update form values
   * 
   * @param {Role} role 
   * @memberof RoleFormContainer
   */
  private updateFormValues(role: Role) {
    if(role) {
      this.form.setValue({
        name:           role.name,
        sort:           role.sort,
        status:         role.status
      });
    }
  }
}

import{
奥尼特，
OnDestroy，
注射器
}从“@角度/核心”；
导入{
造模工，
FormGroup，
验证器
}从“@angular/forms”；
导入{
可见的，
订阅
}来自“rxjs”；
从“@angular/core/testing”导入{inject}”；
从'@angular/router'导入{ActivatedRoute}；
从“ng2 translate”导入{TranslateService}；
从“../../role.sandbox”导入{AccessRoleSandbox}；
从“../../permission/permission.sandbox”导入{AccessPermissionSandbox}；
从“../../models/role form.model”导入角色表单；
从“../../models/Role.model”导入角色；
从“../../../Permission/models/Permission.model”导入权限；
/**
*角色表单容器类
* 
*@出口
*@class RoleFormContainer
*/
导出类RoleFormContainer实现OnInit、OnDestroy{
/**
*翻译服务
* 
*@受保护
*@type{TranslateService}
*@memberofroleformcontainer
*/
受保护的translateService：translateService；
/**
*表单生成器
* 
*@受保护
*@type{FormBuilder}
*@memberofroleformcontainer
*/
受保护的formBuilder:formBuilder；
/**
*激活路径
* 
*@受保护
*@type{ActivatedRoute}
*@memberofroleformcontainer
*/
受保护路由：激活的路由；
/**
*角色创建/更新表单
* 
*@type{FormGroup}
*@memberof UpdateRoleContainer
*/
公共形式：FormGroup；
/**
*访问角色沙箱
* 
*@受保护
*@type{AccessRoleSandbox}
*@memberofroleformcontainer
*/
受保护的accessRoleSandbox：accessRoleSandbox；
/**
*访问权限沙箱
* 
*@受保护
*@type{AccessPermissionSandbox}
*@memberofroleformcontainer
*/
受保护的accessPermissionSandbox:accessPermissionSandbox；
/**
*角色ID
* 
*@私人
*@type{number}
*@memberof UpdateRoleContainer
*/
受保护的角色ID：编号；
/**
*所有权限对象
* 
*@type{Array}
*@memberofcreateRoleContainer
*/
公共权限：数组；
/**
*选定权限
* 
*@type{Array}
*@memberofroleformcontainer
*/
public-selectedPermissions:Array=[]；
/**
*多选下拉设置
* 
*@type{*}
*@memberofcreateRoleContainer
*/
公共多选设置：任意；
/**
*订阅
* 
*@type{Array}
*@memberofroleformcontainer
*/
公共订阅：数组；
/**
*表格标题
* 
*@type{string}
*@memberofroleformcontainer
*/
public formTitle:字符串；
/**
*在提交按钮决策器上加载图标
* 
*@type{Observable}
*@memberofroleformcontainer
*/
公共负荷可观测$：可观测；
/**
*创建RoleFormContainer的实例。
* 
*@param{Injector}Injector
*@memberofroleformcontainer
*/
建造师(
注入器：注入器
) {
this.accessRoleSandbox=注射器.get（accessRoleSandbox）；
this.accessPermissionSandbox=injector.get（accessPermissionSandbox）；
this.translateService=injector.get（translateService）；
this.formBuilder=injector.get（formBuilder）；
this.route=injector.get（ActivatedRoute）；
这个.createForm（）；
}
/**
*关于Init容器
* 
*@memberofcreateRoleContainer
*/
恩戈尼尼特（）{
}
/**
*取消订阅所有可观测数据
* 
*@memberofcreateRoleContainer
*/
公共恩格德斯特罗（）{
}
/**
*注册订阅
* 
*@memberofcreateRoleContainer
*/
公共注册表订阅（）{
const allPermissions$=this.accessPermissionSandbox.permissions$；
const viewingRole$=this.accessRoleSandbox.viewingRole$；
const routerSubscription=this.route.params.subscribe（params=>{
if（params&¶ms.hasOwnProperty（'id'））{
this.roleId=params['id']；
this.accessRoleSandbox.viewRole（this.roleId）；
}
});
常量viewRoleSubscription=viewingRole$.switchMap(
（）=>所有权限$，
（角色：角色，perms:Array）=>{
this.allPermissions=this.normalizePermissions（perms）；
返回角色；
}
).subscribe（角色=>this.updateFormValues（角色））；
this.subscriptions=[routerSubscription，viewRoleSubscription]；
}
/**
*取消注册订阅
* 
*@memberofroleformcontainer
*/
公共未注册订阅（）{
this.subscriptions.forEach（sub=>sub.unsubscribe（））；
}
/**
*创建表单
* 
*@memberofroleformcontainer
*/
私有createForm（）{
this.form=this.getForm（）；
}
/**
*形成
* 
*@私人
*@returns{FormGroup}
*@memberofroleformcontainer
*/
私有getForm（）：FormGroup{
返回此.formBuilder.group({
名称：[“”，验证器。必需]，
排序：[“”，验证器。必需]，
状态：[“”，验证程序。必需]
});
}
/**
*更新表单值
* 
*@param{Role}Role
*@memberofroleformcontainer
*/
私有updateFormValues（角色：角色）{
如果（角色）{
this.form.setValue({
名称：role.name，
排序：role.sort，
状态：role.status
});
}
}
}

这是html文件

<div class="card">
  <form [formGroup]="form" novalidate (ngSubmit)="onSubmit($event, form.value)">
    <div class="card-header">
      <i class="fa fa-tag"></i> {{ formTitle }}
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-sm-8">
          <div class="form-group row">
            <label class="col-md-3 col-form-label" for="text-input">{{'accessRole.lbl.roleName' | translate}}*</label>
            <div class="col-md-9">
                <div class="input-group">
                  <input 
                  type="text" 
                  id="name" 
                  name="name" 
                  class="form-control" 
                  placeholder="{{'lbl.enter' | translate}} {{'accessRole.lbl.roleName' | translate}}..." 
                  formControlName="name"
                  >
                  <div class="input-group-append">
                    <span class="input-group-text"><i class="fa fa-tag"></i></span>
                  </div>
                </div>
            </div>
          </div>
          <div class="form-group row">
            <label class="col-md-3 col-form-label" for="text-input">{{'accessRole.lbl.sort' | translate}}*</label>
            <div class="col-md-9">
                <div class="input-group">
                  <input 
                  type="number" 
                  id="sort" 
                  name="sort" 
                  class="form-control" 
                  placeholder="{{'lbl.enter' | translate}} {{'accessRole.lbl.sort' | translate}}..." 
                  formControlName="sort"
                  >
                  <div class="input-group-append">
                    <span class="input-group-text"><i class="fa fa-sort-numeric-desc"></i></span>
                  </div>
                </div>
            </div>
          </div>
          <div class="form-group row">
            <label class="col-md-3 col-form-label" for="text-input">{{'accessRole.lbl.active' | translate}}</label>
            <div class="col-md-9 centered-checkbox">
              <label class="switch switch-text switch-primary-outline-alt">
                <input type="checkbox" class="switch-input" formControlName="status">
                <span class="switch-label" data-on="Yes" data-off="No"></span>
                <span class="switch-handle"></span>
              </label>
            </div>
          </div>
          <div class="form-group row">
            <label class="col-md-3 col-form-label" for="text-input">{{'accessRole.lbl.associatedPermissions' | translate}}</label>
            <div class="col-md-9 centered-checkbox">
                <angular2-multiselect [data]="allPermissions" [(ngModel)]="selectedPermissions" 
                  [settings]="multiselectSettings"
                  formControlName="permissions">
                </angular2-multiselect>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-footer">
      <button class="btn btn-outline-primary px-3" [disabled]="form.invalid" type="submit">
        {{'btn.lbl.submit' | translate}}
      </button>
        <button type="button" class="btn btn-outline-danger" routerLink="/admin/access/role/list"><i class="fa fa-arrow-left"></i> {{'btn.lbl.goBack' | translate}}</button>
    </div>
  </form>
</div>

{{formTitle}}
{{'accessRole.lbl.roleName'| translate}}*
{{'accessRole.lbl.sort'| translate}}*