Develop Reference

ngModel 2-way binding not assigning after following the documentation

My html file has the following in it:
<form (submit)="register()">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name='username' placeholder="Enter your username" [(ngModel)]="userData.username">
In my ts file for the same component I have:
userData: any = {};
Finally, in my app.module.ts I have:
import { NgModule } from '#angular/core';
#NgModule({
...,
imports: [ ... FormsModule, ...],
...})
According to everything I've read, that is sufficient to have the data in my .ts file update, but it is not currently. I've tried manually updating ngModelChange seperately than the model (and updating the [] and () accordingly), changing names across the html file, removing elements from html and adding them back to find if something isn't working, and several other desperation tricks, but can't seem to figure out why this isn't properly binding.

Form control and ngModel shouldn't be implemented at the same time. If you're going to implement a form group, then use a form control. Otherwise, use ngModel.

How to get input from textarea in html to .ts in Angular

I am a newbie in Angular and now I want to get user input from a textarea but I fail to do so.
Updated: ng-model="num1" > [(ngModel)]="num1"
HTML:
<span><input [(ngModel)]="num1" type="text" placeholder="Enter value"></span>
// user enter one number
<span><input type="text" readonly value={{answer}}></span></p>
<button class="result" (click)=onSelectEqual()>=</button>
// click this button to get the value that user entered
.ts:
num1 : number;
answer: number;
onSelectEqual(){
this.answer = this.num1 + 1 ;
}

In angular, for two-way binding you have to enclose ngModel in [()]. See - https://angular.io/api/forms/NgModel.
<span><input [(ngModel)]="num1" type="text" placeholder="Enter value"></span>

Use [(ngModel)] instead of ng-model in your html template. ng-model is the syntax of Angularjs which will not work in Angular2+.
Also make sure to import FormsModule in app.module.ts
import { FormsModule } from '#angular/forms';
Also add it to the imports array in app.module.ts
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
This is important as without the FormsModule, angular will not be able to identify the ngModel directive.
On a different note, the input will return the value typed by the user as a string. To read it as a number and add 1 to it, you will have to typecast it:
onSelectEqual(){
this.answer = Number(this.num1) + 1 ;
}
Please also note that // for comments doesn't work in html template, use <!-- --> instead.

Autocomplete doesn't work on Prestashop 1.6 custom module

I want to add the jquery ui module autocomplete on a input text.
In my controller I add this line :
$this->context->controller->addJqueryUi('ui.autocomplete');
In my template, a test textbox :
test auto complete <input type="text" id="testautocomplete">
In my JS called by my template :
var dataSrc = ["australia", "austria", "antartica", "argentina", "algeria"];
$("#testautocomplete").autocomplete({
source:dataSrc
});
But that don't work.
I see in my source page this :
<input type="text" id="testautocomplete" autocomplete="off" class="ac_input">
I tried to add this in my JS
$('#testautocomplete').attr("autocomplete", "on");
But still doesn't work.
Please help ! ;)

I could explain, but I think could be more useful for you take an idea from the module ps_searchbar in PS 1.7, check the file ps_searchbar.js which will serve as a guide to apply in your module.
If you have troubles loading the library, you can check the hookHeader of the file ps_searchbar.php.

Angular 4 Error: Cannot find control with unspecified name attribute

I have used google place API following this tutorial but I am getting this error below:
Cannot find control with unspecified name attribute
I have tried also this all hint stackoverflow link
Code
<div class="form-group">
<input #search
type="text"
placeholder="search for location"
autocorrect="off"
autocapitalize="off"
spellcheck="off"
class="form-control"
[formControl]="searchControl"
name="searchControl">
</div>

You should post some code, we're not mediums !
But seeing your error, I would say you're using reactive forms, and you forgot to create your reactive forms.
This means on your input, you have [formControl]="" or formControlName="" attribute, which can't find the corresponding variable.
Could you post the related code of that please ?

Your HTML code looks fine for me, I think this has occurred because you have not initialized searchControl variable in the corresponding JavaScript/TypeScript file.
Add this line into your class in JavaScript/TypeScript file
searchControl = new FormControl();

Angular 2 - ngModel does not work inside <form> after updating to rc4

I've just done an update to RC4; however, many things stopped working, the below was working fine.
Now, ngModel does not work inside unless you remove one of them.
page.js
import {Component} from '#angular/core';
page.html
<form (ngSubmit)="submitForm()">
<ion-list radio-group [(ngModel)]="content" name="ionListGroup">
</ion-list>
</form>
When I click to open page.html, nothing happens, but I see:
*It looks like you're using the old forms module. This will be opt-in in the next RC, and
will eventually be removed in favor of the new forms module. For more information, see:
https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub
I've done some debugging and I've seen that if I remove [(ngModel)]="content" or <form> tag everything work fine again, but I can't remove any of them because I need them both.

1. Include form module to NgModule in the app.module.ts file
import { FormsModule } from '#angular/forms';
#MgModule({
imports: [
...
FormsModule,
...
])}
2. Don't forget to give a name to the input element
<input mdInput type="text" [(ngModel)]="username" placeholder="User Name" name="first" required>

From the docs mentioned in the error message. You need the following step
import {disableDeprecatedForms, provideForms} from '#angular/forms';
bootstrap(AppComponent, [
disableDeprecatedForms()
provideForms()
])