AngularJS #18 - Forms

✔ AngularJS Forms

 > AngularJS에 있는 Form에서는 data-binding과 입력값(input, select, button, textarea)에 대한 validation을 제공한다

 

 

1. Data-Binding

 > ng-model directive를 사용하여 data-binding을 한다

<input type="text" ng-model="firstname">

 : 이제 application에는 firstname이라는 이름을 가진 속성이 존재하게 된다

 : ng-model directive는 input controller를 application 전체에 묶어준다

<script>
 var app = angular.module('myApp', []);
 app.controller('formCtrl', function($scope) {
  $scope.firstname = "John";
 });
</script>

 : firstname은 다른데서도 사용이 가능하다

<form>
 First Name: <input type="text" ng-model="firstname">
</form>

<h1>You entered: {{firstname}}</h1>

 

 

2. Checkbox

<form>
 Check to show a header:
 <input type="checkbox" ng-model="myVar">
</form>

<h1 ng-show="myVar">My Header</h1>

 

 

3. Radiobuttons

<form>
 Pick a topic:
 <input type="radio" ng-model="myVar" value="dogs">Dogs
 <input type="radio" ng-model="myVar" value="tutorials">Tutorials
 <input type="radio" ng-model="myVar" value="cars">Cars
</form>

 : 값은 dogs, tutorials, cars 중에 하나가 된다

 

 

4. Selectbox

<form>
 Select a topic:
 <select ng-model="myVar">
  <option value="">
  <option value="dogs">Dogs
  <option value="tutorials">Tutorials
  <option value="cars">Cars
 </select>
</form>

 : 값은 dogs, tutorials, cars 중에 하나가 된다

 

 

5. AngularJS Form Example

<div ng-app="myApp" ng-controller="formCtrl">
 <form novalidate>
  First Name:<br>
  <input type="text" ng-model="user.firstName"><br>
  Last Name:<br>
  <input type="text" ng-model="user.lastName">
  <br><br>
  <button ng-click="reset()">RESET</button>
 </form>
 <p>form = {{user}}</p>
 <p>master = {{master}}</p>
</div>

<script>
 var app = angular.module('myApp', []);
 app.controller('formCtrl', function($scope){
  $scope.master = {firstName: "John", lastName: "Doe"};
  $scope.reset = function() {
   $scope.user = angular.copy($scope.master);
  };
  $scope.reset();
 });
 </script>

 : 'novalidate' 속성은 HTML5에 있는 것으로서 브라우저의 기본 validation을 disable한다

 

 

 

 

 

 

 

** 위 글은 w3schools.com에 있는 내용을 한국어로 번역하여 적어둔 글입니다.
- https://www.w3schools.com/angular/angular_forms.asp

Angular Forms