Sabareesh
Sabareesh

Reputation: 751

How to validate input text length in material input?

I am developing an application using angular dart. I am using angular dart material input for getting input from user.

I have a multiline text input for which I use material input and type="text".

I have made this field "required" but the problem is when the user enters white space or enter, the "required" is gone. I need a attribute where i can specify a constraint that at least one non-white space character must be entered.

How to achieve this?

Here is my code where I have used material input:

<material-input
    ngControl="textAnswer" [(ngModel)]="answer" multiline
    type="text" label="Your answer" required>
</material-input>

Upvotes: 1

Views: 963

Answers (1)

Pranav C Balan
Pranav C Balan

Reputation: 115222

As per documentation you can use all input elements attribute with it.

All of the attributes that can be used with normal <input> and <textarea> elements can be used on elements inside <mat-form-field> as well

So use HTML5 pattern attribute to match the custom pattern(regular expression).

<material-input
    ngControl="textAnswer" [(ngModel)]="answer" multiline
    pattern="[\s\S]*\S[\s\S]*"
    type="text" label="Your answer" required>
</material-input>

[\s\S]*\S[\s\S]* will help to match a string with at least one non-space character.

NOTE : To include all other character use [\S\s] since . doesn't include a newline character.

Upvotes: 1

Related Questions