Question

我创建了一个角度形式，用户可以从日期选择器中选择时间，并且可以通过多个下拉菜单选择时间，但是我希望该行的前面有一个“加号”按钮，如果单击该按钮，则会在该行的正下方打开另一行第一行，以便用户可以添加其他时间和日期。我正在使用星云主题

这是一张图片

这是我的表单代码

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

Answer 1

也许您可以使用[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>

DEMO

点击按钮打开新行

1 个答案: