portainer/app/edge/components/group-form/groupForm.html

<form class="form-horizontal" name="EdgeGroupForm" ng-submit="$ctrl.formAction()">
  <div class="form-group">
    <label for="group_name" class="col-sm-3 col-lg-2 control-label text-left required"> Name </label>
    <div class="col-sm-9 col-lg-10">
      <input
        type="text"
        class="form-control"
        id="group_name"
        name="group_name"
        ng-model="$ctrl.model.Name"
        required
        auto-focus
        data-cy="edgeGroupCreate-groupNameInput"
        placeholder="e.g. mygroup"
      />
      <div class="help-block" ng-show="EdgeGroupForm.group_name.$invalid">
        <div class="small text-warning">
          <div ng-messages="EdgeGroupForm.group_name.$error">
            <p ng-message="required" class="vertical-center"> <pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'"></pr-icon> This field is required. </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-12 form-section-title"> Group type </div>
  <div class="form-group">
    <div class="col-sm-12">
      <div class="boxselector_wrapper">
        <div class="boxselector">
          <input type="radio" id="static-group" ng-model="$ctrl.model.Dynamic" ng-value="false" ng-checked="!$ctrl.model.Dynamic" />
          <label for="static-group">
            <div class="boxselector_header vertical-center">
              <pr-icon icon="'list'"></pr-icon>
              Static
            </div>
            <p>Manually select Edge environments</p>
          </label>
        </div>
        <div class="boxselector">
          <input type="radio" id="dynamic-group" ng-model="$ctrl.model.Dynamic" ng-value="true" ng-checked="$ctrl.model.Dynamic" />
          <label for="dynamic-group">
            <div class="boxselector_header vertical-center">
              <pr-icon icon="'tag'"></pr-icon>
              Dynamic
            </div>
            <p>Automatically associate environments via tags</p>
          </label>
        </div>
      </div>
    </div>
  </div>

  <!-- StaticGroup -->
  <div ng-if="!$ctrl.model.Dynamic">
    <div ng-if="!$ctrl.noEndpoints">
      <!-- environments -->
      <div class="col-sm-12 form-section-title"> Associated environments </div>
      <div class="form-group">
        <associated-endpoints-selector
          endpoint-ids="$ctrl.model.Endpoints"
          tags="$ctrl.tags"
          groups="$ctrl.groups"
          has-backend-pagination="true"
          on-associate="($ctrl.associateEndpoint)"
          on-dissociate="($ctrl.dissociateEndpoint)"
        ></associated-endpoints-selector>
      </div>
    </div>
    <div class="form-group" ng-if="$ctrl.noEndpoints">
      <div class="col-sm-12 small text-muted">
        No Edge environments are available. Head over to the <a ui-sref="portainer.endpoints">Environments view</a> to add environments.
      </div>
    </div>
  </div>
  <!-- !StaticGroup -->

  <!-- DynamicGroup -->
  <div ng-if="$ctrl.model.Dynamic">
    <div class="col-sm-12 form-section-title"> Tags </div>
    <div class="form-group">
      <div class="col-sm-12">
        <div class="boxselector_wrapper">
          <div class="boxselector">
            <input type="radio" id="or-selector" ng-model="$ctrl.model.PartialMatch" ng-value="true" ng-checked="$ctrl.model.PartialMatch" />
            <label for="or-selector">
              <div class="boxselector_header vertical-center">
                <pr-icon icon="'tag'"></pr-icon>
                Partial match
              </div>
              <p>Associate any environment matching at least one of the selected tags</p>
            </label>
          </div>
          <div class="boxselector">
            <input type="radio" id="and-selector" ng-model="$ctrl.model.PartialMatch" ng-value="false" ng-checked="!$ctrl.model.PartialMatch" />
            <label for="and-selector">
              <div class="boxselector_header vertical-center">
                <pr-icon icon="'tag'"></pr-icon>
                Full match
              </div>
              <p>Associate any environment matching all of the selected tags</p>
            </label>
          </div>
        </div>
      </div>
    </div>

    <tag-selector ng-if="$ctrl.model.TagIds" value="$ctrl.model.TagIds" on-change="($ctrl.onChangeTags)"> </tag-selector>

    <div class="table-in-row">
      <group-association-table
        loaded="$ctrl.loaded"
        page-type="$ctrl.pageType"
        table-type="associated"
        retrieve-page="$ctrl.getDynamicEndpoints"
        dataset="$ctrl.endpoints.value"
        pagination-state="$ctrl.endpoints.state"
        empty-dataset-message="No associated endpoint"
        tags="$ctrl.tags"
        show-tags="true"
        groups="$ctrl.groups"
        show-groups="true"
        has-backend-pagination="true"
        title="Associated environments by tags"
      ></group-association-table>
    </div>
  </div>
  <!-- !DynamicGroup -->

  <!-- actions -->
  <div class="col-sm-12 form-section-title"> Actions </div>
  <div class="form-group">
    <div class="col-sm-12">
      <button
        type="submit"
        class="btn btn-primary btn-sm"
        ng-disabled="$ctrl.actionInProgress || !EdgeGroupForm.$valid || (!$ctrl.model.Dynamic && !$ctrl.model.Endpoints.length) || ($ctrl.model.Dynamic && !$ctrl.model.TagIds.length)"
        button-spinner="$ctrl.actionInProgress"
        data-cy="edgeGroupCreate-addGroupButton"
      >
        <span ng-hide="$ctrl.actionInProgress">{{ $ctrl.formActionLabel }}</span>
        <span ng-show="$ctrl.actionInProgress">In progress...</span>
      </button>
    </div>
  </div>
</form>