Html 单击按钮打开新行

我已经创建了一个角度表单，用户可以从datepicker中选择时间，并且有多个下拉列表可以选择时间，但我希望在该行前面有一个“加号”按钮，如果单击该按钮，将在第一行的正下方打开另一行，以便用户可以添加其他时间和日期。我正在利用星云主题

这是一张照片

这是我的表格代码

<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

试试这个：

在您的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>

---

用FormArray会很容易的@PrashantPimpale我想以另一种形式添加整个代码，其中还有其他字段。我从未使用过表单数组，而且我必须将所有数据绑定到一个数据传输对象，即schedule@ahsannissar-我想你必须用FormArray@AbolfazLR有帮助的链接吗？我还将在另一个表单中添加整行，其中有其他字段，如姓名、电子邮件等，因此您确定表单数组在那里会有所帮助吗？请查看表单官方文档以了解表单数组的说明。您可以将整个表单封装为Array+名称、电子邮件。。。从被动表单文档转换成表单组也是一种有趣的方式。我现在正试图让它与formarray一起工作，不过我也会尝试这种方法。如果它起作用，我会把它标对的

<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>