我正在尝试实施多选 https://www.npmjs.com/package/ngx-mat-select-search，但它给了我一个表单组错误
//这是我的模板类
libmicrospdy.so.0.0.0
//这是我的组件类
<div class="main-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="">
<div class="card-header card-header-danger">
<h4 class="card-title">Edit User</h4>
<p class="card-category">Please enter details to edit user</p>
<div class="alert alert-warning" *ngIf="formError">{{textStatus}}</div>
</div>
<div class="card-body">
<form [formGroup]="userEditForm">
<div class="row form-group">
<div class="col-md-6">
<mat-form-field class="example-full-width">
<input matInput required placeholder="First Name" type="text" formControlName="firstName"
[(ngModel)]="data.user.firstName" [ngClass]="{ 'is-invalid': submitted && frm.firstName.errors }">
<div class="custom-alert" *ngIf="frm.firstName.errors">
First Name is required.
</div>
</mat-form-field>
</div>
<div class="col-md-6">
<mat-form-field class="example-full-width">
<input matInput placeholder="Last Name" type="text" formControlName="lastName"
[(ngModel)]="data.user.lastName" [ngClass]="{ 'is-invalid': submitted && frm.lastName.errors }">
<div class="custom-alert" *ngIf="frm.lastName.errors">
Last Name is required.
</div>
</mat-form-field>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<mat-form-field class="example-full-width">
<input matInput placeholder="User Id" formControlName="userId"
[(ngModel)]="data.user.userId" [ngClass]="{ 'is-invalid': submitted && frm.emailId.errors }">
<div class="custom-alert" *ngIf="frm.userId.errors">
UserID is required.
</div>
</mat-form-field>
<mat-form-field class="example-full-width">
<input matInput placeholder="Email Id" type="text" formControlName="emailId"
[(ngModel)]="data.user.emailId" [ngClass]="{ 'is-invalid': submitted && frm.emailId.errors }">
<div class="custom-alert" *ngIf="frm.emailId.errors">
Email Id is required.
</div>
</mat-form-field>
<!-- <mat-form-field class="example-full-width">
<mat-select placeholder="{{firstSelected.roleName}}"
formControlName="newRoleAssigned" [(ngModel)]="firstSelected">
<mat-option *ngFor="let role of roles" [value]="role">
{{role.roleName}}
</mat-option>
</mat-select>
</mat-form-field>-->
<mat-form-field class="example-full-width">
<mat-select formControlName="MultiRoleCtrl" placeholder="Assign Role" [multiple]="true" #multiSelect>
<ngx-mat-select-search [placeholderLabel]="'Search Role...'" [noEntriesFoundLabel]="'No Matching Roles Found'" [formControl]="MultiRoleFilterCtrl">
<mat-icon ngxMatSelectSearchClear>delete</mat-icon>
</ngx-mat-select-search>
<mat-option *ngFor="let role of filteredRoles | async" [value]="role.roleName">
{{role.roleName}}
</mat-option>
</mat-select>
</mat-form-field>
<span>Gender*</span><mat-radio-group class="v-space" [value]="gender" (change)="genderSelect($event)" required [(ngModel)]="data.user.userDetails.gender" name="radioGender">
<mat-radio-button class="h-space " value="Male" >Male</mat-radio-button>
<mat-radio-button class="h-space " value="Female" >Female</mat-radio-button>
<mat-radio-button class="h-space " value="Others">Others</mat-radio-button>
</mat-radio-group>
</div>
</div>
<div class="row form-group" *ngFor="let address of addressArr">
<div class="col-md-12" *ngIf="address.type == 'home'">
<p class="card-category">Edit your Address</p>
</div>
<div class="col-md-6" *ngIf="address.type == 'home'">
<mat-form-field class="example-full-width">
<input matInput placeholder="Block Name" type="text" formControlName="blockName" [(ngModel)]="address.blockName">
</mat-form-field>
</div>
<div class="col-md-6" *ngIf="address.type == 'home'">
<mat-form-field class="example-full-width">
<input matInput placeholder="Block Number" type="text" formControlName="blockNumber" [(ngModel)]="address.blockNumber">
</mat-form-field>
</div>
<div class="col-md-6" *ngIf="address.type == 'home'">
<mat-form-field class="example-full-width">
<input matInput placeholder="Street" type="text" formControlName="street" [(ngModel)]="address.street">
</mat-form-field>
</div>
<div class="col-md-6" *ngIf="address.type == 'home'">
<mat-form-field class="example-full-width">
<input matInput placeholder="City" type="text" formControlName="city" [(ngModel)]="address.city">
</mat-form-field>
</div>
<div class="col-md-6" *ngIf="address.type == 'home'">
<mat-form-field class="example-full-width">
<input matInput placeholder="Country" type="text" formControlName="country" [(ngModel)]="address.country">
</mat-form-field>
</div>
<div class="col-md-6" *ngIf="address.type == 'home'">
<mat-form-field class="example-full-width">
<input matInput placeholder="Pincode" type="text" formControlName="pincode" [(ngModel)]="address.pincode">
</mat-form-field>
</div>
</div>
<button type="submit" cdkFocusInitial (click)="onCancel()" class="btn btn-link pull-left">
Cancel
</button>
<button mat-raised-button type="submit" cdkFocusInitial (click)="onSubmit()"
class="btn btn-success pull-right">
Save Changes
</button>
<div class="clearfix"></div>
</form>
</div>
</div>
</div>
</div>
</div>
预期结果是带有复选框的下拉菜单
答案 0 :(得分：1)
只需从输入中删除“ ngModel”即可。例如，您有：
<input matInput required placeholder="First Name" type="text" formControlName="firstName" [(ngModel)]="data.user.firstName" [ngClass]="{ 'is-invalid': submitted && frm.firstName.errors }">
但是不必使用[(ngModel)]，因为您已经使用formControlName了，因为它仍然绑定到表单控件的值。
<input matInput required placeholder="First Name" type="text" formControlName="firstName" [ngClass]="{ 'is-invalid': submitted && frm.firstName.errors }">
足够