Estou tentando aplicar um validator de obrigatoriedade ao preencher um select, mas estou recebendo:
can't assign to property "validator" on "selectAnimal": not an object"
Segue meu código:
ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
firstCtrl: ['', Validators.required]
});
this.secondFormGroup = this._formBuilder.group({
selectAnimal:[Validators.required]
});
Meu template:
<form [formGroup]="secondFormGroup">
<div class="formSegundoGrupo">
<mat-form-field>
<mat-select name="selectAnimals" formControl="selectAnimal" 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>
Como eu defino que o meu selectAnimal deverá ser uma string? Ainda não entendi completamente como funciona o formgroup/formcontrol.
Preciso criar uma variável selectAnimal do tipo string?
@Edit: Tentei no início da declaração das variáveis:
formControlAnimalSelect = new FormControl('valid', [
Validators.required,
Validators.pattern('valid'),
]);
ngOnInit() {
this.secondFormGroup = this._formBuilder.group({
formControlAnimalSelect:['',Validators.required]
});
Mas recebo:
"can't assign to property "validator" on "formControlAnimalSelect": not an object"