Angular 将表单控件添加到<;时出错;mat select>;
我正试图将表单控件添加到我的项目中的Angular 将表单控件添加到<;时出错;mat select>;,angular,Angular,我正试图将表单控件添加到我的项目中的,但我不断收到此错误ng:ngControl没有提供程序 当我将[formControl]=“formControlName”属性添加到我的mat select时,会发生这种情况。它似乎不承认这个财产。下面是material.angular.io网站上的示例 我的角度版本是最新的,他们的网站是5.2.8,材料版本是5.2.4 如果有人有这方面的经验,请让我知道。多谢各位 <mat-form-field> <mat-select pla
,但我不断收到此错误ng:ngControl没有提供程序
当我将[formControl]=“formControlName”
属性添加到我的mat select时,会发生这种情况。它似乎不承认这个财产。下面是material.angular.io网站上的示例
我的角度版本是最新的,他们的网站是5.2.8,材料版本是5.2.4
如果有人有这方面的经验,请让我知道。多谢各位
<mat-form-field>
<mat-select placeholder="Choose one" [formControl]="formControlName" [errorStateMatcher]="matcher">
<mat-option>Clear</mat-option>
<mat-option value="valid">Valid option</mat-option>
<mat-option value="invalid">Invalid option</mat-option>
</mat-select>
<mat-hint>Errors appear instantly!</mat-hint>
<mat-error *ngIf="selected.hasError('required')">You must make a selection</mat-error>
<mat-error *ngIf="selected.hasError('pattern') && !selected.hasError('required')">
Your selection is invalid
</mat-error>
</mat-form-field>
清楚的
有效选项
无效选项
错误会立即出现!
你必须做出选择
您的选择无效
我在我的一个应用程序中使用了几乎相同的功能。它正在工作。希望这对您有所帮助
HTML:
终于找到了一个解决方案:在主模块中,您需要导入ReactiveFormsModule
能否显示容器模块导入。您是否在应用模块中正确导入了角材料组件?@Fjordo是的,我的所有其他组件都工作正常。这里的主要模块是MatFormFieldModule、MatSelectModule和MatInputModule,我相信它们都是进口的。对于select组件,除了表单控件之外,其他一切都可以正常工作。是否在组件中显示相关表单的代码?在我看来,您的mat表单字段中缺少[formGroup]=“yourFormGroupName”。
<form [formGroup]="clienteForm" novalidate>
<div class="row">
<div class="col-3 col-sm-3 col-md-3 col-xl-3">
<mat-form-field class="example-full-width">
<mat-select class="example-full-width" #accionSelecionada [formControl]="clienteForm.controls['accionSelecionada']" [(ngModel)]="tipoAccion"
name="accionSelecionada" placeholder="Seleccione una acción:" required>
<mat-option *ngFor="let accion of acciones" [value]="accion.valor"> {{accion.accion}} </mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</form>
export class ABCComponent implements OnInit {
clienteForm: FormGroup;
constructor() {
this.clienteForm = this.constructoclienteForm.group({
accionSelecionada: ['', Validators.compose([Validators.required])]
});
}
acciones: any = [{
'accion': 'Activar',
'valor': 'D'
}, {
'accion': 'Desactivar',
'valor': 'B'
}];
}