Angular 폼 제작법에 대해
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이라든지 다양한 폼 주위의 소작을 할 때에
쓰는 방법이 있는 것 같습니다만 좀처럼 익숙하지 않다. .
그 밖에도 좀 더 깨끗하게 하는 방법 있겠지만. 조언 구한다.
Reference
이 문제에 관하여(Angular 폼 제작법에 대해), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ichimura/items/243afdfb04f0b4f647b1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)