Question

我的组件中有一个表单设置，用户最多可以修改三个班次容器，包括开始时间，结束时间和一周中的几天。

无需复制一堆代码三次，我试图找出最有效的方法来解决这个问题。

以下是我目前单班的HTML：

<span formGroupName="slice" *ngFor="let slice of [1,2,3]">
   <table class="table table-condensed">
      <thead>
         <th></th>
         <th></th>
         <th></th>
         <th></th>
         <th></th>
         <th></th>
         <th></th>
         <th></th>
         <th style="text-align:center;">Enable</th>
      </thead>
      <tbody>
         <tr>
            <td class="col-md-2" style="text-align:center; vertical-align:middle">
               Time Slice {{ slice }}
            </td>
            <td>
               <select name="hour_start" class="form-control input-sm"  formControlName="hour_start">
                  <option value="{{ h }}" *ngFor="let h of hours">{{ h }}</option>
               </select>
            </td>
            <td>
               <select name="minute_start" class="form-control input-sm" formControlName="minute_start">
                  <option value="{{ m }}" *ngFor="let m of minutes">{{ m }}</option>
               </select>
            </td>
            <td>
               <select name="period_start" class="form-control input-sm" formControlName="period_start">
                  <option value="{{ p }}" *ngFor="let p of period">{{ p }}</option>
               </select>
            </td>
            <td style="text-align:center; vertical-align:middle;">-</td>
            <td>
               <select name="hour_end" class="form-control input-sm" formControlName="hour_end">
                  <option value="{{ h }}" *ngFor="let h of hours">{{ h }}</option>
               </select>
            </td>
            <td>
               <select name="minute_end" class="form-control input-sm" formControlName="minute_end">
                  <option value="{{ m }}" *ngFor="let m of minutes">{{ m }}</option>
               </select>
            </td>
            <td>
               <select name="period_end" class="form-control input-sm" formControlName="period_end">
                  <option value="{{ p }}" *ngFor="let p of period">{{ p }}</option>
               </select>
            </td>
            <td style="vertical-align:middle; text-align:center;"><input type="checkbox" (change)="toggleSlice(slice, true)"></td>
         </tr>
         <tr>
            <td class="col-md-2"></td>
            <td colspan="7">
               <table class="table table-condensed" formGroupName="days">
                  <tbody>
                     <tr>
                        <td *ngFor="let d of days">
                           <div class="checkbox">
                              <label>
                              <input type="checkbox" formControlName="day_{{ d }}"> {{ d }}
                              </label>
                           </div>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </td>
         </tr>
      </tbody>
   </table>
</span>
<!-- Time Slice -->
</span>

这是我的组件：

this.transitionForm = this.fb.group({
            shift: this.fb.group({
                slice: this.fb.group({
                    hour_start: { value: '1', disabled: true },
                    minute_start: { value: '00', disabled: true },
                    period_start: { value: 'AM', disabled: true },
                    hour_end: { value: '1', disabled: true },
                    minute_end: { value: '00', disabled: true },
                    period_end: { value: 'AM', disabled: true },
                    days: this.fb.group({
                        day_Su: { value: '', disabled: true },
                        day_M: { value: '', disabled: true },
                        day_Tu: { value: '', disabled: true },
                        day_W: { value: '', disabled: true },
                        day_Th: { value: '', disabled: true },
                        day_F: { value: '', disabled: true },
                        day_Sa: { value: '', disabled: true }
                    })
                })
            })
        });

在其他小细节上，每个班次行都包含启用/禁用复选框，因此我可以根据需要选择使用其他两个班次容器，否则，它们将被禁用。

现在使用类似jQuery的东西，我可以通过获取此复选框的父元素并以这种方式处理每组数据（shift）来完成此操作。我的目标是不需要使用jQuery并找出可以为这种情况提供的反应形式。

问题：

如何使用反应形式将这三个时间片（移位）形成为更动态的设置，而不是为每个切片硬编码切片。反应形式可以解决这个问题吗？

Answer 1

是的，您可以使用Form Arrays动态添加和删除被动表单的各个部分。

有一篇很好的博客文章涵盖了这个here，我已经包含了下面的一些相关内容

<强>组件

ngOnInit() {
  // we will initialize our form here
  this.myForm = this._fb.group({
      name: ['', [Validators.required, Validators.minLength(5)]],
      addresses: this._fb.array([
        this.initAddress(),
      ])
    });
  }

initAddress() {
    // initialize our address
    return this._fb.group({
      street: ['', Validators.required],
      postcode: ['']
    });
  }

addAddress() {
  // add address to the list
  const control = <FormArray>this.myForm.controls['addresses'];
  control.push(this.initAddress());
}

removeAddress(i: number) {
  // remove address from the list
  const control = <FormArray>this.myForm.controls['addresses'];
  control.removeAt(i);
}

<强> HTML

<!-- list of addresses -->
<div formArrayName="addresses">
  <div *ngFor="let address of myForm.controls.addresses.controls; let i=index">
    <!-- address header, show remove button when more than one address available -->
    <div>
      <span>Address {{i + 1}}</span>
      <span *ngIf="myForm.controls.addresses.controls.length > 1" (click)="removeAddress(i)">
      </span>
    </div>

    <!-- Angular assigns array index as group name by default 0, 1, 2, ... -->
    <div [formGroupName]="i">
      <!--street-->
      <div>
        <label>street</label>
        <input type="text" formControlName="street">
        <!--display error message if street is not valid-->
        <small [hidden]="myForm.controls.addresses.controls[i].controls.street.valid">
          Street is required
        </small>
      </div>
      <!--postcode-->
      <div>
        <label>postcode</label>
        <input type="text" formControlName="postcode">
      </div>
    <div>
  </div>
</div>

Angular2 - 具有数据数组的反应形式

1 个答案: