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

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：如果您想使用 only 控件

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()">