html - 单击按钮打开新行
问题描述
我创建了一个角度形式,用户可以从日期选择器中选择时间,并且有多个下拉槽可以选择时间,但我希望该行前面有一个“加号”按钮,如果单击该按钮将在第一行下打开另一行以便用户可以添加其他时间和日期。我正在使用星云主题
这是我的表单代码
<form class="form-horizontal" (ngSubmit)="addTimes()" #form="ngForm">
<div class="form-group row">
<label for="inputEmail3" class="label col-sm-3 form-control-label">Course</label>
<div class="col-sm-6">
<nb-select selected="1" name="name" [(ngModel)]="schedule.course" fullWidth>
<nb-option *ngFor="let x of courses" [value]="x.name">{{x.name}}</nb-option>
</nb-select>
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="label col-sm-3 form-control-label">Class Times</label>
<div class="col-sm-6">
<input nbInput
placeholder="Form Picker"
[nbDatepicker]="formpicker" fullWidth name="date" [(ngModel)]="schedule.date">
<nb-datepicker #formpicker ></nb-datepicker>
From
<nb-select selected="0" name="hour" [(ngModel)]="schedule.hour" style="margin-top: 20px;">
<nb-option value="0">--</nb-option>
<nb-option value="1">1</nb-option>
<nb-option value="2">2</nb-option>
<nb-option value="3">3</nb-option>
<nb-option value="4">4</nb-option>
<nb-option value="5">5</nb-option>
<nb-option value="6">6</nb-option>
<nb-option value="7">7</nb-option>
<nb-option value="8">8</nb-option>
<nb-option value="9">9</nb-option>
<nb-option value="10">10</nb-option>
<nb-option value="11">11</nb-option>
<nb-option value="12">12</nb-option>
</nb-select>
<nb-select selected="1" name="minute" [(ngModel)]="schedule.minute">
<nb-option value="1">--</nb-option>
<nb-option value="00">00</nb-option>
<nb-option value="15">15</nb-option>
<nb-option value="30">30</nb-option>
<nb-option value="45">45</nb-option>
</nb-select>
<nb-select selected="1" name="timeofday" [(ngModel)]="schedule.timeofday">
<nb-option value="1">--</nb-option>
<nb-option value="AM">AM</nb-option>
<nb-option value="PM">PM</nb-option>
</nb-select>
To
<nb-select selected="0" name="tohour" [(ngModel)]="schedule.tohour">
<nb-option value="0">--</nb-option>
<nb-option value="1">1</nb-option>
<nb-option value="2">2</nb-option>
<nb-option value="3">3</nb-option>
<nb-option value="4">4</nb-option>
<nb-option value="5">5</nb-option>
<nb-option value="6">6</nb-option>
<nb-option value="7">7</nb-option>
<nb-option value="8">8</nb-option>
<nb-option value="9">9</nb-option>
<nb-option value="10">10</nb-option>
<nb-option value="11">11</nb-option>
<nb-option value="12">12</nb-option>
</nb-select>
<nb-select selected="1" name="tominute" [(ngModel)]="schedule.tominute">
<nb-option value="1">--</nb-option>
<nb-option value="00">00</nb-option>
<nb-option value="15">15</nb-option>
<nb-option value="30">30</nb-option>
<nb-option value="45">45</nb-option>
</nb-select>
<nb-select selected="1" name="totimeofday" [(ngModel)]="schedule.totimeofday">
<nb-option value="1">--</nb-option>
<nb-option value="AM">AM</nb-option>
<nb-option value="PM">PM</nb-option>
</nb-select>
</div>
</div>
<div class="form-group row">
<div class="offset-sm-3 col-sm-9">
<button type="submit" nbButton status="primary">Add Time</button>
</div>
</div>
</form>
解决方案
也许你可以通过使用来实现[ngModelGroup]
我们假设有一个模型LabelCalss
export interface LabelCalss {
label?: string;
}
尝试这个:
在你的 app.component.ts 中:
formValue: any;
tags: LabelCalss[] = [
{ label: "important" },
{ label: "difficult" }
]
onSubmit(f: NgForm) {
let tags = Object.keys(f.value).map(item => {
return f.value[item];
});
this.formValue = tags;
console.log(tags);
// Object.keys because the new indexes are string
}
addNewRow() {
this.tags.push({})
}
在你的 app.component.html
<form #f="ngForm" (ngSubmit)="onSubmit(f)">
<div class="form-group" *ngFor="let x of tags; index as i" [ngModelGroup]="i">
<input name="label" class="form-control" [(ngModel)]="x.label">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<button (click)="addNewRow()" class="btn btn-success mt-5 mb-5">Add New Row</button>
<pre style="background-color:#ddd">
{{tags|json}}
</pre>
<pre style="background-color:#eee">
Submitted Object:
{{formValue|json}}
</pre>
推荐阅读
- shopify - Shopify - 将文件 CSV 订购到文本文件
- c++ - 解码霍夫曼树 C++
- netsuite - Suitelets 何时触发用户事件脚本?
- amazon-web-services - 将用户限制在一个区域 AWS
- python - 如何在过滤条件pyspark中使用函数
- ios - 使用 AVAudioRecorder 录制后,AVAudioPlayer 不通过扬声器播放
- python - 等待函数,直到它在 python 异步 IO 中收到回调
- php - Laravel 助手渲染视图显示为空
- php - 调用数组上的成员函数 chunk() - Laravel
- django-models - 用户注册后的 Django 新扩展用户配置文件