CODEWITHSUNDEEP
jqueryangular
balajivaishnav
balajivaishnav

Reputation: 2893

Angular 2 text box required validation message still showing even after the value has been entered

My Requirement

I need to hide the error message of required from the text box after the value has been entered

What I have Did

I have created a form in which user can add dynamic fields by clicking add button, in that there will be text box, on click of that text box am showing out a modal in which it will have the some couple of fields after the user entered the fields with value in the modal they will hit a button in the modal will be getting value and displaying it in a pre tag inside the modal footer, using jquery am getting the text from the pre tag and applying the text to the text box fields on the button clicks inside the modal footer

Problem

Even after the value is pasted from the pre tag using jquery still am getting the erro message how to get rid of it

this is my code for you reference

  <input ngControl="rules" id="rule_{{i}}" class="form-control rulez" #rules="ngForm" data-toggle="modal" data-target="#myModal" type="text" style="width: 299px !important;">

        <div class="error" *ngIf="rules.control.touched">
            <div *ngIf="rules.control.hasError('required')">Please Select a Rule</div>
        </div>
</div>

 <pre id="preTag"></pre>

Jquery code to get value from the modal and applying it to the same text box when the modal popped up by onclick

var idz, valz;
$(document).ready(function () {
    $(document).delegate('#getRuleStr', 'click', function () {
        console.log("hey"+idz);
        $('#'+idz).val($('#preTag').text());
    });
    $(document).delegate('.rulez', 'click', function () {
        idz = this.id;
        valz = $('#' + idz).val();
        console.log("inn" + valz);

            $('#builder').queryBuilder('reset');
            $('#resultRule').addClass('hide').find('pre').empty();

    });
});

Please help me resolve this issue

Upvotes: 1

Views: 695

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657318

As far as I know you need to emit the change event on the input after modifying the value to make Angular2 Forms update its state.

In Angular2 it's usually better to update the model and bind to it from the view to get the view updated to reflect the model by Angular2, instead of messing with the DOM directly using jQuery.

Upvotes: 1

Related Questions