'Value is getting empty after using jquery nice select plugin in angular

I have a form select in reactive form which works fine when no external plugins use. I used jquery nice select plugin and this time i discovered that it's getting empty value. I'm newbie in angular and i really don't know what's the way of getting value after using plugin.

My form.html 

     <select name="select" data-msg-required="Please, fill in this field" aria-required="true" formControlName="country">
                        <option value="">Country</option>
                        <option value="BD">Bangladesh</option>
                        <option value="JP">Japan</option>
                    </select>

My custom.js

 $('select').niceSelect();

My form.ts

this.createForm = this.formBuilder.group({
        country: ['']
    });
console.log(this.createForm.value);

Output:

{country: ""}
jqueryangular


Solution 1:[1]

I solved my problem removing the $('select').niceSelect(); from custom.js and adding class="nice-select" in select tag. It will not look like a perfect nice select but will be great for you.

Result of the change

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tyler2P

Related Questions