Validation Error Messages not displaying for ion-textarea

@Sweg wrote:

In my Ionic 5 / Angular app, I am trying to display a validation message if a required field within my form is clicked into, & left without having a valid value.

Here is the HTML:

<form formGroup="form">
    <ion-grid>
      <ion-row>
        <ion-col>
          <ion-item lines="none">
            <ion-label position="floating">
              Please describe your issue
            </ion-label>
            <ion-textarea formControlName="message"></ion-textarea>
          </ion-item>
        </ion-col>
      </ion-row>
      <ion-row *ngIf="form.get('message').invalid && form.get('message').touched">
        <ion-col>
          <p>Invalid Message</p>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-button (click)="onSendMessage()">
            <ion-icon slot="end" name="send-outline"></ion-icon>
            Send
          </ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>

And here is the Typescript:

ngOnInit() {
    this.form = new FormGroup({
      message: new FormControl(null, {
        updateOn: 'blur',
        validators: [
          Validators.required,
        ]
      })
    });
  }

  onSendMessage() {
    console.log('', this.form);
  }

But if I click into the ion-textarea & leave without entering a value, the error message isn’t displaying.

Can someone please tell me why this is happening, & how it can be resolved?

Posts: 1

Participants: 1

Read full topic