我想要更新表单中的预选选项答案

【问题标题】：I want pre-selected option in the update form already我想要更新表单中的预选选项
【发布时间】：2019-07-02 16:19:42
【问题描述】：

我正在使用 mat-select 数组来显示对象数组包含一些集合，例如：

typesOfAccess = [{1 : 'View Image'},{2 : 'Tag MPxN'},
{3 : 'Configure User'},{4 : 'Assign UserGroup'},
{5:.......},{6:..........}]

我正在从 API 订阅数据，这些 API 将数字及其字符串值保存在数组中。如下：

this.UserEditForm = this.formBuilder.group({
      is2FAEnabled:[''],
      AccessRights : ['',Validators.required]
    });

我想显示我从 api 获得的数组的编号，以便在 HTML 中预先选择。

<mat-selection-list formControlName="AccessRights" (ngModelChange)="onNgModelChange($event)" required>
    <mat-list-option *ngFor="let tta of typesOfAccess; let i = index" [value]="i+1" [selected]="AccessRights.option">
      {{tta[i+1]}}
   </mat-list-option>
 </mat-selection-list>

请在这里帮忙。

【问题讨论】：

标签： html angular angular-material angular-reactive-forms angular-template

【解决方案1】：

根据documentation：

每个控件名称的值是一个数组，其中包含初始值作为数组中的第一项。

组件中的初始值为''。将其更改为您想要的初始值：

AccessRights : [initialValue ,Validators.required]

【讨论】：

this.UserEditForm = this.formBuilder.group({ name: ['', [Validators.required], email : ['',Validators.required], mobile : ['', [Validators .required] is2FAEnabled:[''], AccessRights : [this.AccessRights,Validators.required] }); this.apiService.getUserById(+userId) .subscribe( data => { console.log(data); this.UserEditForm.patchValue(data); }); }
您在上面的代码中有几个语法错误。试试这个：this.UserEditForm = this.formBuilder.group({ name: ['', [Validators.required]], email : ['',[Validators.required]], mobile : ['', [Validators.required]], is2FAEnabled: [''], AccessRights: [this.AccessRights, [Validators.required]] });console.log(data); 的输出是什么？
它选择所有可用的选项。
嗨 @JohanSwanepoel 你是对的 ? 但我认为唯一的问题是值需要 ba 一个数组，我已经创建了一个示例库 stackblitz.com/edit/angular-assguq ?

【解决方案2】：

删除选择属性绑定，只更新表单控件值，这将反映到 html 元素

<mat-selection-list formControlName="AccessRights" >
    <mat-list-option *ngFor="let tta of typesOfAccess; let i = index" [value]="i+1">
      {{tta[i+1]}}
     </mat-list-option>
</mat-selection-list>

创建表单组时设置AccessRights值

this.UserEditForm = this.formBuilder.group({
      is2FAEnabled:[''],
      AccessRights : ['2',Validators.required]
    });

或像这样手动设置值

this.UserEditForm.get('AccessRights').setValue('2'); // will select Tag MPxN

更新了??

您需要发送所选项目的数组基数，例如 [1,3]

this.UserEditForm.get('AccessRights').setValue([1,3]); // ?

如果你想像这样选择单个值

this.UserEditForm.get('AccessRights').setValue([3]); // ?

demo ??

【讨论】：

我想从 HTTP 调用中动态获取值。无法手动设置值。
您能否与我们分享一个如何通过 http 调用获取值的示例？ ?
this.UserEditForm = this.formBuilder.group({ name: ['', [Validators.required], email : ['',Validators.required], mobile : ['', [Validators .required] is2FAEnabled:[''], AccessRights : [this.AccessRights,Validators.required] }); this.apiService.getUserById(+userId) .subscribe( data => { console.log(data); this.UserEditForm.patchValue(data); }); }
不确定。这就是我想知道的。如果我发送 id 数组，我想动态选择选项。
@sagar03 我已经更新了答案并包含了一个现场演示，希望这会有所帮助?