Материал Angular2 пройти мат-выберите в качестве модели при отправке

Question

Мне нужно передать модель формы onSubmit и одним из элементов модели является опция выбора. Как я могу передать значение и selectionName onSubmit?

Html

<form #EditUserForm="ngForm" (ngSubmit)="onSubmit(EditUserForm)">

 <mat-form-field class="container">
    <mat-select [value]="currentUserRole.RoleId" name="RoleId" required >
      <mat-option  *ngFor="let role of roles" [value]="role.RoleId">{{role.RoleName}}</mat-option>
    </mat-select>
 </mat-form-field>

Машинопись:

onSubmit(EditUserFormModel: NgForm) {
}

Answer 1

Не уверен, что вы подразумеваете под

value and selectionName

Я предполагаю, что значением является currentUserRole.RoleId, а selectionName - role.RoleName

В этом случае

[value]="currentUserRole.RoleId">

Ввод значения указывает возвращаемое значение. Если и ваше значение, и selectionName находятся в currentUserRoleobject, вы можете просто передать его, а не только Id, который будет записан в значение поля формы.

[value]="currentUserRole">

Но это также означает, что вам придется изменить отображаемую настройку отображаемого текста. Вы можете настроить это с помощью mat-select-trigger

<mat-form-field>
  <mat-select [value]="currentUserRole.RoleId" name="RoleId" required>
    <mat-select-trigger>
      {{currentUserRole.RoleName}}
    </mat-select-trigger>
    <mat-option  *ngFor="let role of roles" [value]="role.RoleId">{{role.RoleName}}</mat-option>
  </mat-select>
</mat-form-field>

Если вам нужен обратный вызов для установки значений формы , посмотрите документы

Существует событие selectionChange и выбранное свойство, которое позволяет вам подключиться к выбранной опции.

Если вы хотите получить значение из-за пределов объекта, который выбирает итерацию, вы, вероятно, захотите сделать это в selectionChange и исправить ваш объект формы.

HTML

<mat-select 
  [value]="currentUserRole.RoleId" 
  (selectionChange)="setValues($event, EditUserForm)"
  name="RoleId" 
  required 
  > 
      <mat-option  
          *ngFor="let role of roles" 
          [value]="role.RoleId">
            {{role.RoleName}}
      </mat-option>
</mat-select>

TS

public setValues(event, form): void {
  form.patchValue({...})
}

Здесь вы можете установить значения по своему желанию.

При отправке вы в идеале просто передаете EditUserFormModel.value, чтобы получить данные своей формы.

Звучит так, будто вы хотите получить значения в вашем onSubmit, которые я бы не поощрял. Вместо этого смоделируйте вашу форму для вывода всех значений, которые вам нужны при отправке, и просто обработайте саму отправку. При необходимости подключитесь к обратным вызовам для исправления значений событий.

Answer 2

Вы можете использовать двустороннюю привязку

 <mat-select [(value)]="currentUserRole.RoleId" name="RoleId" required >

но это может вызвать проблемы в некоторых сценариях, поэтому я бы использовал ngModel

   <mat-select [(ngModel)]="currentUserRole.RoleId" name="RoleId" required >

таким образом currentUserRole.RoleId будет установлено на то, что пользователь выберет в поле выбора сразу.

Если вы хотите отложить привязку (например, чтобы создать функцию «сброса»), вам придется сначала скопировать, или лучше использовать для этого ReactiveForms.