How to show the error message of a mdl-textfield programmatically?

Question

I'd like to show the MDL error message on a quantity text field when the user tries to send a form leaving the field empty. The field is like:

<mdl-textfield
      #quantityBox
      type="text"
      label="Num."
      pattern="-?[0-9]*(\.[0-9]+)?"
      error-msg="Insert a number!"
      [(ngModel)]="selectedBoxQuantity"
      floating-label
      class="no-wrap"></mdl-textfield>

I can access to the field component calling a ViewChild:

@ViewChild('quantityBox') private quantityBox: MdlTextFieldComponent;

But apparently I can only change the error message:

this.quantityBox.errorMessage = "New error message";

How can I force the message without entering an invalid value in the input field?

What I'd like to achieve is similar to this when I click/tap on the + button:

score 2 · Answer 1 · answered Apr 22 '19 at 20:29

I solved it by adding class to div. Here's my solution:

HTML:

<div id="id_div" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input id="id" class="mdl-textfield__input" type="text">
    <label class="mdl-textfield__label" for="id">ID</label>
    <span id="id_msg" class="mdl-textfield__error"></span>
</div>

JS:

function submit() {
    if (document.getElementById("id").value === "") {
        document.getElementById("id_div").classList.add("is-invalid");
        document.getElementById("id_div").classList.add("is-dirty");
        document.getElementById("id_msg").innerText="Invalid ID";
        return;
    }
    //other code...
}

While this code snippet may be the solution, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-‌code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. — nircraft, Apr 22 '19 at 20:36

score 0 · Answer 2 · answered Nov 18 '16 at 14:46

I'am not quite sure what you are trying to achieve - but here is a solution that might you help to find it out. Add the required attribute to the mdl-textfield and make the error-msg attribute a real property so angular evaluates it:

<mdl-textfield
      required
      type="text"
      label="Num."
      pattern="-?[0-9]*(\.[0-9]+)?"
      [error-msg]="message"
      [(ngModel)]="selectedBoxQuantity"
      floating-label
      class="no-wrap"></mdl-textfield>

In you component add the following code:

  public message = 'Insert a number!';
  public selectedBoxQuantity_: number;

  get selectedBoxQuantity() {
    return this.selectedBoxQuantity_;
  }

  set selectedBoxQuantity(v: string){
    this.selectedBoxQuantity_ = v;
    this.message = v.length === 0 ? 'Insert a number!' : 'Insert a valid number';
  }

This textfield now show the message 'Insert a number!' at the initial load because the field is required and the message is set to 'Insert a number!'. If the user types the method selectedBoxQuantity is called. If the value is still empty the error messages remains Insert a number!. If not, the error message is set to 'Insert a valid number'. If the input did not match your pattern the new error message will be shown. If the input is a number the error message goes away.

Thank you for your suggestion: what I'm trying to do is the dynamic adding/removal of the "required" attribute. I'd like that this textfield becomes red only when the user click on the + button and it's still empty. With the required "attribute" set in the template, the field becomes red immediately after the component initialization. — Michele DC, Nov 18 '16 at 15:28
readonly can also be changed at runtime [readonly]='property in your controller' — michael, Nov 18 '16 at 15:42
`` halts with error: `Can't bind to 'readOnly' since it isn't a known property of 'mdl-textfield'.` Just updated to angular-mdl 2.4.4 now — Michele DC, Nov 21 '16 at 15:52

How to show the error message of a mdl-textfield programmatically?

2 Answers2