0

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"

1 Resposta 1

0

FormGroup e FormControl são classes usadas para gerenciar um grupo de inputs ou um input, respectivamente.

São implementações de Reactive Forms que é forma de trabalhar com formulários sem 'encher' o template, pois tudo fica na classe do seu componente.

Como você está utilizando o FormBuilder, ele já gera para você os FormControls, portanto, seu primeiro exemplo só precisa do valor inicial do controle dentro do array, como segue:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .