Angular 폼 제작법에 대해

3185 단어 SPAAngular6
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/[email protected]/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이라든지 다양한 폼 주위의 소작을 할 때에
쓰는 방법이 있는 것 같습니다만 좀처럼 익숙하지 않다. .

그 밖에도 좀 더 깨끗하게 하는 방법 있겠지만. 조언 구한다.

좋은 웹페이지 즐겨찾기