Q:

Dynamic Inline form in angular using material

I am trying to build a dynamic form with the help of angular material. The requirement is the I need two input columns in one row and the number of input values can be dynamic. Is there any way such that I can build this form using ng-repeat with two input box in one row. 
Thanks. Any help is appreciated.

A:

You can use Flexbox. I am not sure how efficient this solution is, but it will surely give you a start.
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
You can also use bootstrap class(row and col-xs-12), but then you'll have to tweak your ng-repeat to loop with the increment of 2, to accommodate a pair of array elements in a single row, which would ultimately require some extra effort on the controller part just for that.

