Question

我需要传递onSubmit形式的模型，并且模型的元素之一是选择选项。如何将value和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都在currentUserRole对象中，则可以传递该值，而不仅仅是传递要写入表单字段值的ID。

[value]="currentUserRole">

但这也意味着您必须更改显示的自定义显示的文本。 You can customize this with 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>

如果您正在寻找一个回调来设置表单值have a look at the docs

有一个event 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。

Angular2材质在提交时通过垫选作为模型

2 个答案: