Question

我根据用户输入的数字生成一个数组：

      <div class="form-group">
        <input type="number"
          class="form-control"
          id="numPeople"
          [(ngModel)]="numPeople"
          name="numPeople"
          required>
      </div>

使用此数字，我会生成[[＆＃39; name＆＃39;，＆＃39; gender＆＃39;]，* number ...]的数组。然后我尝试使用ngForm直接绑定到这个数组中，我希望将性别设置为默认值，但在两个方面遇到问题：

1）不起作用，因此我在select中没有默认值，并且required不强制输入，因此即使设置了所需的标记，也可以在不选择选项的情况下按提交。

2）当我从2路数据绑定到输入框中删除正在读入的占位符文本时，我收到此错误，并且如果我尝试插入空白字符串，即通过放置＆＃39;＆＃39;进入后端阵列：[＆＃39;＆＃39;，＆＃39;＆＃39; ]

EXCEPTION：./SellTicketComponent类SellTicketComponent中的错误 - 内联模板：373：28由以下原因引起：如果在表单中使用ngModel tag，必须设置name属性或表单控制必须定义为“独立”和“独立”。在ngModelOptions中。
  Example 1: <input [(ngModel)]="person.firstName" name="first">
  Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}"> ErrorHandler.handleError @
error_handler.js：54 next @ application_ref.js：359 schedulerFn @ async.js：93 SafeSubscriber .__ tryOrUnsub @ Subscriber.js：223 SafeSubscriber.next @ Subscriber.js：172 Subscriber._next @ Subscriber.js：125 Subscriber.next @ Subscriber.js：89 Subject.next @ Subject.js：55 EventEmitter.emit @ async.js：79 NgZone.triggerError @ ng_zone.js：331 onHandleError @ ng_zone.js：292 ZoneDelegate.handleError @ zone.js：246 Zone.runTask @ zone.js：154 ZoneTask.invoke @ zone.js：345 error_handler.js：56 ORIGINAL EXCEPTION：如果在a中使用了ngModel 表单标记，必须设置name属性或表单控制必须定义为“独立”和“独立”。在ngModelOptions中。
  Example 1: <input [(ngModel)]="person.firstName" name="first">
  Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">

这是代码：

      <form (ngSubmit)="onSubmit(f)" #f="ngForm">
        <label> Enter the details of all your plus ones for the guest list: </label>
        <br>
         <div *ngFor="let guest of guests; let i = index;">
          <label> Enter First and Last Name:</label>
           <div class="form-group">
             <input type="text"
                    class="form-control"
                    id="{{guest[0]}}"
                    [(ngModel)]="guest[0]"
                    name="{{guest[0]}}"
                    required>
           </div>

           <div class="form-group">
           <label> Enter Gender: </label>
            <select
            class="form-control"
             id="{{i}}"
             name="{{i}}"
             [(ngModel)]="guest[1]"
             required>
            <option value="female" selected>
               female
             </option>
             <option value="male">
               male
             </option>
           </select>
         </div>
       </div>
     </form>

Answer 1

由于您似乎使用[(ngModel)]="guests[0]"，我不会真正了解您如何生成您的访客以及它们的样子......我会假设您想要使用[(ngModel)]="guests[i]"。以下是使用后者的示例。

如果要为访客使用双向绑定，则在生成访客时，可以将性别值预设为女性，以便在下拉列表中预先选择，例如：

this.guests.push({name:'',gender:'female'}, {name:'',gender:'female'});

如果您不需要为来宾提供双向绑定，则可以使用例如[(ngModel)]="selected"，您已在组件中声明selected: string = 'female'。那也行。

所以你的所有形式都可能是这样的：¨

<button (click)="generate()">Generate 2 Guests</button> <!-- dummy button -->

<form (ngSubmit)="onSubmit(f.value)" #f="ngForm">
  <label> Enter the details of all your plus ones for the guest list: </label>
  <div *ngFor="let guest of guests; let i = index;">
    <label> Enter First and Last Name:</label>
    <div>
      <input type="text" name="guest{{i}}" [(ngModel)]="guests[i].name" required>
    </div>

    <div>
      <label> Enter Gender: </label>
      <select name="gender{{i}}" [(ngModel)]="guests[i].gender" required>
        <option value="female">female</option>
        <option value="male">male</option>
      </select>
    </div>
  </div>
  <button type="submit">Submit</button>
</form>

这将检查字段的有效性。当然，用户可以输入白色空格，因此您也需要检查它。

这是 Demo Plunker （不检查空格）

希望这有帮助！：）

Angular2和Html表单 - 双向数据绑定空白问题，必填，选中

1 个答案: