使用材料的角度动态内联形式答案

【问题标题】：Dynamic Inline form in angular using material使用材料的角度动态内联形式
【发布时间】：2017-06-15 05:37:44
【问题描述】：

我正在尝试借助角度材料构建动态形式。要求是我需要在一行中有两个输入列，并且输入值的数量可以是动态的。有什么方法可以让我使用ng-repeat 构建此表单，并在一行中有两个输入框。

谢谢。任何帮助表示赞赏。

【问题讨论】：

使用 ng-repeat，我可以构建表单，但问题是连续两个输入框。
你在使用引导程序吗？创建一个小提琴并向我们提供链接
embed.plnkr.co/Zu8CPGymfHVKt83S4SzA/preview 使用这个。

标签： javascript angularjs angularjs-ng-repeat angular-material

【解决方案1】：

您可以使用Flexbox。我不确定这个解决方案的效率如何，但它肯定会给你一个开始。

CSS

    .myrow {
       display: flex;
       flex-wrap: wrap;
    }
   .mygrid {
       flex: 1;
       min-width: 25%;
       padding : 10px;
   }

HTML

<form name="userFormTwo" novalidate>
      <div class="myrow">
        <div class="form-group" ng-repeat="user in formDataTwo.users" ng-class="{ 'has-error' : userFieldForm.email.$invalid }">
          <div class="mygrid">
            <ng-form name="userFieldForm">
              <label>{{ user.name }}'s Email</label>
              <input type="email" class="form-control" name="email" ng-model="user.email" required>
              <p class="help-block" ng-show="userFieldForm.email.$invalid">Valid Email Address Required</p>
            </ng-form>
          </div>
        </div>
      </div>
    </form>

Demo Plunker

您也可以使用引导类（row 和 col-xs-12），但是您必须调整您的 ng-repeat 以循环使用 2 的增量，以容纳一对数组元素单行，这最终需要在控制器部分为此付出额外的努力。

【讨论】：

【解决方案2】：

当您使用引导程序时，您需要使用form-inline 类。检查下面的代码。

<form name="userFormTwo" class="form-inline" novalidate>

        <div class="form-group" ng-repeat="user in formDataTwo.users" ng-class="{ 'has-error' : userFieldForm.email.$invalid }">
        <ng-form name="userFieldForm">
            <label>{{ user.name }}'s Email</label>
            <input type="email" class="form-control" name="email" ng-model="user.email" required>
            <p class="help-block" ng-show="userFieldForm.email.$invalid">Valid Email Address Required</p>
        </ng-form>
        </div>

    </form>

【讨论】：

谢谢。但我认为它不会连续显示两个输入框。
你怎么说？你至少试过吗？您需要在桌面视图中检查输出