Question

我试图在不填写选择内容的情况下应用验证器，但是我得到了

”无法分配给“ formControlAnimalSelect”上的属性“ validator”：不是对象”

我尝试：

TS：

  formControlAnimalSelect = new FormControl('valid', [
      Validators.required,
      Validators.pattern('valid'),
    ])

ngOnInit() {
      this.secondFormGroup = this._formBuilder.group({
        formControlAnimalSelect:['',Validators.required]
      });

HTML：

<form [formGroup]="secondFormGroup">
<div class="formSegundoGrupo">
                <mat-form-field>
                  <mat-select name="selectAnimals" formControl="formControlAnimalSelect" placeholder="Eu perdi um...">
                    <mat-option value="gato">
                      Gato
                    </mat-option>
                    <mat-option value="cahorro">
                      Cachorro
                    </mat-option>
                    <mat-option value="coelho">
                      Coelho
                    </mat-option>
                    <mat-option value="tartaruga">
                      Tartaruga
                    </mat-option>
                  </mat-select>

                  <mat-error *ngIf="selectAnimal.hasError('required')">Você precisa selecionar ao menos um pet!</mat-error>

                </mat-form-field>
              </div>

             </form>

Answer 1

问题是您以两种不同的方式实现了一件事。

情况1：如果要使用，请仅使用控件

ts

  formControlAnimalSelect = new FormControl('valid', [
      Validators.required,
      Validators.pattern('valid'),
    ])

ngOnInit() {
      /* Remove this code
      this.secondFormGroup = this._formBuilder.group({
        formControlAnimalSelect:['',Validators.required]
      });*/
  }

html

<mat-select name="selectAnimals" 
 [formControl]="formControlAnimalSelect" placeholder="Eu perdi um...">

案例2：如果您想将控件与表格一起使用

ts

 /* remove this code
 formControlAnimalSelect = new FormControl('valid', [
      Validators.required,
      Validators.pattern('valid'),
    ])
 */

ngOnInit() {
      this.secondFormGroup = this._formBuilder.group({
        formControlAnimalSelect:['',Validators.required]
      });

html

<mat-select name="selectAnimals" 
 formControlName="formControlAnimalSelect" placeholder="Eu perdi um...">

Answer 2

使用formControlName指令代替formControl。

formControlName="formControlAnimalSelect"

我不确定为什么在一开始就定义formControlAnimalSelect ：(实际上，由于您需要将其作为formGroup secondFormGroup的一部分，因此可以像下面这样轻松地更改formControl初始化。

this.secondFormGroup = this._formBuilder.group({
    formControlAnimalSelect: new FormControl('valid', [
        Validators.required,
        Validators.pattern('valid'),
   ])
});

对于错误处理，您可以使用

*ngIf="secondFormGroup.get('formControlAnimalSelect').hasError('required')"

Answer 3

对我来说，这就是我所拥有的，它给了我同样的错误：

<form formGroup="productCreateForm" (ngSubmit)="onSubmit()">

将其更改为此并起作用：

<form [formGroup]="productCreateForm" (ngSubmit)="onSubmit()">

“无法在“ formControlAnimalSelect”上分配给属性“ validator”：不是对象” Angular Typescript

3 个答案:

ts

html

ts

html