We Keep Coding

how do I implement template variables in angular?

Im trying to pull the ngModel object for form validation but upon serving I'm getting an error at my template variable.
here is the code:
<form>
<div class="form-group">
<label for="courseName">Course Name</label>
<br />
<input type="text" id="courseName" ngModel name="courseName" #courseName="ngModel" required />
<br />
<div *ngIf="!courseName.valid" class="alert alert-danger">field is required</div>
<label for="category">Category</label>
<br />
<select name="category" id="category" class="form-control-lg" ngModel>
<option value="test">poop</option>
</select>
<div class="checkbox">
<label for="checkbox">
<input id="checkbox" type="checkbox" name="moneyBack" />30-day money back guarantee
</label>
</div>
</div>
<button class="btn btn-primary">Submit</button>
</form>
EDIT
After testing, I found that the problem arises when I assign the template variable, as well as I noticed that the "#" symbol in my code editor is not the same color as the tutorial I'm watching meaning that the editor isn't recognizing the syntax so its possible that this syntax is either deprecated (which is possible, the tutorial I'm following seems to be a little older) or I am implementing it wrong, what is the correct way to declare a template variable?
OR more importantly lol
what is the correct way to access the form-control object so I can get the .value, .pristine, .touched properties?
<#templateVariable ngModel name="test"> **No Error**
<#templateVariable="ngModel" ngModel name="test>**ERROR**
EDIT
EDIT
The issue was with naming ngModel and the field the same same
EDIT
here is a screenshot of the error
here is a screenshot of the import of ngModel

There are few things that you can check:
Import FormModule in app.module.ts file.
Change your code in the following way
<input type="text" id="courseName" [(ngModel)] = "courseName" name="courseName" #course="ngModel" required/>
[(ngModel)] and reference name must be different. If you put both same name to 'courseName' you will get reference error!

Use this way
[(ngModel)]="courseName"

angularJs check if input is entered

I am new to angular Js and developing a form where the input box will minimize when input is being entered. i am using ng-blur,ng-click and ng-focus and calling the function which will change the css classes for this purpose.
But the issue is when id/password is saved, the css class is not changed as their is no click,focus,blur on the form.
Below is the code snippet
<input class="field" name="id" ng-model="form.id"
ng-click="onClickFunction()" ng-focus="onFocusFunction()"
ng-blur="onBlurFunction(fieldValue)" type="text" required>
How can the id/password that is saved be recognized?
Thanks in advance.

I think you can use something like below assuming loginform as the form name and username as your name for userID field
<input id="login_username" class="form-control" type="text" ng-minlength="5"
name="userName" placeholder="Username" ng-model="userName" required
autofocus>
<div style="color: red" ng-messages="loginForm.userName.$error" ng-if="loginForm.userName.$dirty">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">Username should be over 5 characters</div>
</div>

Calling a function onclick in AngularJs

My code has following structure:
main.html - loads all modules - declares ng-app and main controller - contains div tag-load-div
file1.html ... (all other html files) - contain only <div> / child tags and are loaded into a load-div which is in main.html on events such as click
now in one such file say file3.html, I have a checkbox. onclick of that checkbox I want to open a modal window - a form that will be submitted. Now here is my code
file3.html
<div>
<input type="checkbox" name="your-group" value="unit-in-group" onclick="toggleModal();"/>Unit-in-group
<modal title="some title" visible="showModal">
<form role="form">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</modal>
</div>
now I have written follwing code in the main main controller declared in main.hml
$scope.showModal = false;
$scope.toggleModal = function(){
$scope.showModal = !$scope.showModal;
};
The expected behaviour is when my file3 is loaded I will see a check box on the screen and as I click it, it will open a modal window but instead I see modal form fields on the same page where I see checkbox. and when I click it I get angular exception that showModal is not defined.
Where am I going wrong?

Just need to use Angular syntax: ng-click for the click and ng-show for the visibility.
<input type="checkbox" name="your-group" value="unit-in-group" ng-click="toggleModal();"/>Unit-in-group
<modal title="some title" ng-show="showModal">
Other options:
You could also use ng-change instead of ng-click, which in this case wouldn't make much difference.
Or you could use ng-model (ng-model="showModal") and get rid of your toggle function entirely Example.

I had a similar problem.
To detect a click use Angular syntax: (click)="toggleModal();"
<input type="checkbox" name="your-group" value="unit-in-group" (click)="toggleModal();"/>
I hope this helps.

Another approach would be to use the ngChange directive
to detect that the checkbox got checked
<input type="checkbox" name="your-group" value="unit-in-group" ng-change="toggleModal();"/>
Code for modal remains the same as the other answer suggested
<modal title="some title" ng-show="showModal">

AngularJS ng-class not applying bootstrap error classes

I'm building a multi-step AngularJS form that adds bootstrap error classes on ng-class. I'm using this tutorial as my base for building the form http://scotch.io/tutorials/javascript/angularjs-multi-step-form-using-ui-router#building-our-angular-app-app.js.
Question: Why are my ng-class css classes not being applied to my form-group wrapper when child fields are invalid? My submit button stays disabled until form fields are correct, but error classes and styling never gets applied.
HTML
<div class="form-group" ng-class="{'has-error has-feedback' : longForm.fullName.$invalid && !longForm.fullName.$pristine}">
<label class="hidden-xs" for="FullName">Full Name</label>
<input class="form-control input-lg" type="text" name="FullName" placeholder="Your Full Name" ng-model="longFormData.fullName" required />
</div>
<div class="form-group">
<button class="btn btn-cta btn-lg btn-block" type="submit" ng-disabled="longForm.$invalid">Next</button>
</div>

In this particular case it's actually really simple.
You have the name of your input as FullName, but you are referencing it as fullName.
The property names published on the form controller are case sensitive, so just change the case of either:
name="FullName" to name="fullName"
OR
longForm.fullName to longForm.FullName

restrict and input text to a specific language characters in angular.js

i am building a form using angular.js.
my form looks like:
<form name="registerForm" class="form-horizontal">
<div class="control-group">
<label class="control-label">שם פרטי</label>
<div class="controls">
<input type="text" ng-model="register.firstName" placeholder="שם פרטי" required>
</div>
</div>
<div class="control-group">
<label class="control-label">שם משפחה</label>
<div class="controls">
<input type="text" ng-model="register.username" placeholder="שם משפחה">
</div>
</div>
<div class="control-group">
<label class="control-label">דוא"ל</label>
<div class="controls">
<input type="email" ng-model="register.email" placeholder='דוא"ל'>
</div>
</div>
</form>
i am building a register form inside i will have 2 fields:
first name and last name that should be entered only with a specific language (not english).
explanation: no other language except that language will be accepted by the form.
all other fields will have to be in english.
thanks

This is a good question.
You can check the Unicode block for this language here, I guess it is Hebrew, so the code range is 0590-05FF.
Then you can use ngPattern to do the validation like this:
<input type="text" name="firstName" ng-model="register.firstName" placeholder="שם פרטי" required ng-pattern="pattern"></div>
function ctrl($scope) {
$scope.pattern = /[\u0590-\u05FF]+/g;
}
Here is the demo

I think Regex is the way to go.
HTML5 has the new pattern attribute that you could use to validate the user input, the only problem is that you also have to take care of browsers that do not support it, with Angular you can use the ngPattern directive.
This question will help you with the regex.
Remember that this is just the front-end validation and I recommend you to validate the user input in the back-end as well.