AngularJS — Input

Text Input

<input ng-model="user.name" type="text">
<p>Hello, {{user.name}}!</p>

Number Input

<input ng-model="age" type="number">
<p>Age: {{age}}</p>

Email Input

<input ng-model="email" type="email">
<p>Email: {{email}}</p>

Checkbox

<input type="checkbox" ng-model="agreed">
<p>Agreed: {{agreed}}</p>

Radio Buttons

<input type="radio" ng-model="color" value="red"> Red
<input type="radio" ng-model="color" value="blue"> Blue
<input type="radio" ng-model="color" value="green"> Green
<p>Selected: {{color}}</p>

Textarea

<textarea ng-model="message"></textarea>
<p>{{message}}</p>

Select

<select ng-model="selectedFruit">
  <option value="">Select Fruit</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>
<p>Selected: {{selectedFruit}}</p>

ng-disabled

<input ng-model="name">
<button ng-disabled="!name">Submit</button>

Mini Practice

1. Create different input types
2. Bind values to model
3. Use ng-disabled
4. Create a select dropdown

Up Next

Continue with Validation — form validation.