member-dialog.component.html

<h2 mat-dialog-title>{{formTitle}}</h2>
<mat-dialog-content style="width:700px">
  <form [formGroup]="memberForm">
    <b *ngIf="newMode">{{ "member.dialog.label.invite.members" | translate: {target: inviteTarget} }}</b>
    <mat-form-field  class="form-field-full-width">
      <mat-label>{{ "member.dialog.label.choose.user" | translate }}</mat-label>
      <input id="member-user" type="text" matInput formControlName="member-user"
             [matAutocomplete]="auto" (keyup)="applyUserFilter($event)"
             required>
      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let user of filteredOptions | async" [value]="user.username">
          {{user.username}}
        </mat-option>
      </mat-autocomplete>
      <mat-hint *ngIf="newMode">{{ "member.dialog.hint.type.username" | translate }}</mat-hint>
    </mat-form-field>


    <mat-form-field class="form-field-full-width">
      <mat-label>{{ "member.dialog.label.select.role.type" | translate }}</mat-label>
      <select matNativeControl placeholder="{{ 'member.dialog.label.permission.review' | translate }}"
                  formControlName="member-roleType"
                  name="Role type"
                  matTooltip="{{ 'member.dialog.tooltip.role.type' | translate }}"
                  id="member-user_id" required>
        <option *ngFor="let role of memberRoles"
                    [value]="role.value">
          {{role.key}}
        </option>
      </select>
      <mat-hint>{{ "member.dialog.hint.choose.role" | translate }}</mat-hint>
    </mat-form-field>

    <mat-form-field class="form-field-full-width" >
      <mat-checkbox  *ngIf="isResourceMember" formControlName="member-can-review" id="member-user-can-review"
                     matTooltip="{{ 'member.dialog.tooltip.permission.review' | translate }}"
      >{{ "member.dialog.label.permission.review" | translate }}
        <!-- This input is used to make the mat-checkbox as form filed   -->
        <input matInput style="display: none;">
      </mat-checkbox>
      <mat-hint>{{ "member.dialog.hint.can.review" | translate }}</mat-hint>
    </mat-form-field>

  </form>
</mat-dialog-content>
<mat-dialog-actions>
  <button id="closeDialogButton" mat-raised-button color="primary" (click)="closeDialog()">
    <mat-icon>cancel</mat-icon>
    <span>{{ "member.dialog.button.close" | translate }}</span>
  </button>
  <button id="saveButton" mat-raised-button (click)="onSaveButtonClicked()" color="primary"
          [disabled]="!submitButtonEnabled">
    <mat-icon>save</mat-icon>
    <span>{{ "member.dialog.button.save" | translate }}</span>
  </button>
</mat-dialog-actions>