Angularフォーム作法について

Angular6でこんな絞り込みメニューを作成した。

jqueryだと簡単なフォームだけど、Angularだと2つの項目で絞り込む時、迷ったのでメモ

test.ts

export class CompetitionsComponent implements OnInit {
  competitions: Competition[] = [];
  selectedStatus = new BehaviorSubject(CompetitionStatus.Editing);
  status = CompetitionStatus.Editing;
  plan = PlanStatus.al;

  statusList: Array<{ value: number; name: string }> = [
    {
      value: CompetitionStatus.Editing,
      name: getCompetitionStatusName(CompetitionStatus.Editing)
    },
    {
      value: CompetitionStatus.Waiting,
      name: getCompetitionStatusName(CompetitionStatus.Waiting)
    },
    {
      value: CompetitionStatus.Cancel,
      name: getCompetitionStatusName(CompetitionStatus.Cancel)
    }
  ];

  planList: Array<{ value: number; name: string }> = [
    {
      value: PlanStatus.al,
      name: getPlanName(PlanStatus.al)
    },
    {
      value: PlanStatus.standard,
      name: getPlanName(PlanStatus.standard)
    },
    {
      value: PlanStatus.free,
      name: getPlanName(PlanStatus.free)
    }
  ];

  onChangeStatus(status:number) {
    this.status = status;
  }

  onChangePlan(plan:number) {
    this.plan = plan;
  }
  // getListでAPIを呼んでます
  onSubmit() {
    this.selectedStatus
    .pipe(mergeMap(_status 
      => this.competitionService.getList(this.status, this.plan)))　
    .subscribe(
      competitions => {
        this.competitions = competitions;
      },
      err => {
        this.alert.danger('情報の取得に失敗');
      }
    );
  }
}

test.html

<div class="form-group">
  <div class="block">
    <label for="status">ステータス</label>
    <select class="form-control" id="status" required  [ngModel]="status" (change)="onChangeStatus($event.target.value)">
      <option *ngFor="let status of statusList" [value]=status.value>{{ status.name }}</option>
    </select>
  </div>
  <div class="block">
    <label for="plan">プラン</label>
    <select class="form-control" id="plan" required [ngModel]="plan" (change)="onChangePlan($event.target.value)">
      <option *ngFor="let plan of planList" [value]=plan.value>{{ plan.name }}    </option>
    </select>
  </div>
  <div class="block">
    <button type="submit" class="btn btn-success" (click)="onSubmit()">検索    
 </button>
  </div>
</div>

test.scss

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

.form-group{
  padding: 10px 20px;
}

.form-control{
  width: 200px; 
  margin-right:10px;
}
.btn{
  margin-top: 23px;
}
.block{
  float: left;
}

Angular6だとngModelとか色々フォーム周りの所作をする際に
書き方があるようですがなかなか慣れないす。。

他にももっと綺麗にする方法あるんだろうけど。アドバイス求む。