@incdevco/framework/angular/modules/address/templates/write-directive.html

node.js lambda framework

<div class="address-write"
  ng-form="address_form">
  <div layout="column">
    <md-input-container>
      <label for="country">Country</label>
      <md-select name="country"
        ng-model="address.country"
        ng-model-options="{trackBy:'$value.iso_2_code'}"
        ng-required="true">
        <md-option 
          ng-repeat="country in countries"
          ng-value="country">United States</md-option>
      </md-select>
      <ng-messages for="address_form.country.$invalid" role="alert">
        <ng-message when="required">The name of the country is required. (United States) </ng-message>      
      </ng-messages>
    </md-input-container>
  </div>
  <div layout="column">
    <md-input-container>
      <label for="street">Street</label>
      <input type="text" name="street"
        ng-model="address.street"
        ng-required="required" />
      <ng-messages for="address_form.street.$invalid" role="alert">
        <ng-message when="required">The street address is required. (580 Main St)</ng-message>      
      </ng-messages>
    </md-input-container>
  </div>
  <div layout="column">
    <md-input-container>
      <label for="unit">Unit</label>
      <input type="text" name="unit"
        ng-model="address.unit"
        ng-required="false" />
      <ng-messages for="address_form.unit.$invalid" role="alert">
        <ng-message when="required">The unit is required. (#300) </ng-message>      
      </ng-messages>
    </md-input-container>
  </div>
  <div layout="column" layout-gt-md="row">
    <div flex>
      <md-input-container>
        <label for="city">City</label>
        <input type="text" name="city"
          ng-model="address.city"
          ng-required="required" />
        <ng-messages for="address_form.city.$invalid" role="alert">
          <ng-message when="required">The name of the city is required. (Carbondale) </ng-message>      
        </ng-messages>
      </md-input-container>
    </div>
    <div flex>
      <md-input-container>
        <label for="state">State</label>
        <md-select name="state"
          ng-model="address.state"
          ng-model-options="{trackBy:'$value.abbreviation'}">
          <md-option 
            ng-repeat="state in states" 
            ng-value="state">{{state.name}}</md-option>
        </md-select>
        <ng-messages for="address_form.state.$invalid" role="alert">
          <ng-message when="required">Please select a state for the address. (Colorado)</ng-message>      
        </ng-messages>
      </md-input-container>
    </div>
    <div flex>
      <md-input-container>
        <label for="postal_code"
          ng-if="address.country.iso_2_code !== 'US'">Postal Code</label>
        <label for="postal_code"
          ng-if="address.country.iso_2_code === 'US'">Zip Code</label>
        <input type="text" name="postal_code"
          ng-model="address.postal_code"
          ng-required="required" />
        <ng-messages for="address_form.postal_code.$invalid" role="alert">
          <ng-message when="required"
            ng-if="address.country.iso_2_code !== 'US'">The postal code is required. (81623) </ng-message>
          <ng-message when="required"
            ng-if="address.country.iso_2_code === 'US'">The zip code is required. (81623) </ng-message>      
        </ng-messages>
      </md-input-container>
    </div>
  </div>
</div>