Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular: how to get input value without ng-model

I have form with dynamic inserted input to the DOM (from some other plugin). Is there way to read value from this input without ng-model on it?

<form name="myForm" data-my-directive>
    <div class="customPlugin">
        <!-- here input without ng-modeal appears: -->
        [ <input type="text" name="foo" value="bar" /> ]
    </div>
</form>

I look at many examples, but everywhere people writes about ng-model... :(

like image 330
mwl Avatar asked Mar 22 '16 17:03

mwl


People also ask

Can we do two way binding without ngModel?

Because no built-in HTML element follows the x value and xChange event pattern, two-way binding with form elements requires NgModel .

Can I use ngModel without form?

standalone: When set to true, the ngModel will not register itself with its parent form, and acts as if it's not in the form.

What is [( ngModel )] used for?

The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations.

What is the difference between ngModel and [( ngModel )]?

The answer is: (ngModel) causes a 1-way data-binding, whereas [(ngModel)] ensures a two-way data binding.

What is nG model in AngularJS?

AngularJS ng-model Directive. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

What is the use of input form in angular?

Form contains multiple html input elements to take input from the user. button allows the user to submit the from to backend API an d it calls click binding event. In Angular, View is html template and controller is an typescript component. Reading input text is basic concept every Angular developer need to know.

How to get the input value without ngmodel?

<input [ngModel]="variable" (ngModelChange)="function_to_fire_on_model_change ($event)"> If you want to get the input value, but without ngModel (as in your snipet you don't use it), you can get as this: <input type="text" #input class="form-control" placeholder="Let's find your product....."

Can AngularJS validate input data?

AngularJS can validate input data. AngularJS offers client-side form validation. AngularJS monitors the state of the form and input fields (input, textarea, select), and lets you notify the user about the current state. AngularJS also holds information about whether they have been touched, or modified, or not.


1 Answers

Use a directive that watches for changes.

You can then assign this to your scope, if deemed necessary.

.directive('watchForChanges', function () {
        return {
            link: function(scope, element, attrs) {
                element.on('change', function (e) {
                  console.log(e.target.value);
                  // scope.myValue = e.target.value;
                })
            }
        }
});

PLNKR: http://plnkr.co/edit/qrj8ZbUya5wE0EylFcGG?p=preview

like image 138
nikk wong Avatar answered Sep 27 '22 21:09

nikk wong