将表单控件添加到<mat-select>时出错

时间:2018-03-09 14:49:31

标签: angular

我正在尝试向我的项目中的<mat-select>添加表单控件,但我一直收到此错误ng: No provider for 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>

2 个答案:

答案 0 :(得分:1)

最后能够找到解决方案:在主模块中,您需要导入ReactiveFormsModule

答案 1 :(得分:0)

我在我的一个应用程序中使用了几乎相同的...以及它的工作......希望这对你有帮助,

HTML:

                <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'
                    }];
            }