AngularJS_codeLab 챕터4
1. 추가 폼 만들기
- 추가 폼 만들기
<form name="todoForm" ng-submit="add(newTodoTitle)">
<div class="input-group">
<input type="text"class="form-control" ng-model="newTodoTitle">
<span class="input-group-btn">
<button class="btn btn-success" type="submit">추가</button>
</span>
</div>
</form>
//추가 폼 동작 구현
$scope.add = function(newTodoTitle){
//newTodo 객체 만들기
var newTodo = {
title: newTodoTitle,
complete: false,
createdAt: Date.now()
};
//newTodo 객체를 배열에 추가하기
$scope.todos.push(newTodo);
//input 태그 값 비워주기
$scope.newTodoTitle = "";
};
‘새로운 할 일’을 입력 후 엔터를 치면…
아래에 추가된다!
2. 폼 검증하기
- angular form태그의 속성
<!--폼 태그 속성 json형식으로 출력하기-->
<form name="todoForm"></form>
<pre></pre>
{
"$error": {},
"$name": "todoForm", //폼 name 값
"$dirty": false, //값 입력 여부(input에 값 입력하면 true로 변한다)
"$pristine": true, //값 입력 여부(input에 값 입력하면 false로 변한다)
"$valid": true, //값 유효성 여부(유효하면 true)
"$invalid": false, //값 유효성 여부(유효하면 false)
"$submitted": false
}
- ng-show를 이용해 경고 문구 보이기/숨기기
<form name="todoForm" ng-submit="add(newTodoTitle)">
<!--minlength로 검증 조건 만들기(3글자 이상 입력하지 않으면 유효하지 않음)-->
<input type="text"class="form-control" ng-model="newTodoTitle" placeholder="새로운 할 일을 입력하세요." minlength="3">
</form>
<!--ng-show를 이용해 경고 문구 보이기/숨기기-->
<div ng-show="todoForm.$dirty && todoForm.$invalid">
<div class="alert alert-warning" role="alert">3글자 이상 입력하세요.</div>
</div>
3글자 이하로 입력했을 때
3글자 이상 입력했을 때
- 속성 값을 이용해 input에 색깔 넣기
/*유효한 값일 때는 초록색*/
.input-group .ng-valid.ng-dirty{
border: solid 1px green;
}
/*유효하지 않은 값일 때는 초록색*/
.input-group .ng-invalid.ng-dirty{
border: solid 1px red;
}
3. 결과 코드
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css" />
<script src="lib/script.js"></script>
<!--angularJS CDN 삽입
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/>
</head>
<body ng-app="todo" ng-controller="TodoCtrl">
<div class="container">
<h1>Todo만들기</h1><br>
<!--추가 폼 만들기-->
<form name="todoForm" ng-submit="add(newTodoTitle)">
<div class="input-group">
<input type="text"class="form-control" ng-model="newTodoTitle" placeholder="새로운 할 일을 입력하세요." minlength="3">
<span class="input-group-btn">
<button class="btn btn-success" type="submit">추가</button>
</span>
</div>
<!--ng-show를 이용해 경고 문구 보이기/숨기기-->
<div ng-show="todoForm.$dirty && todoForm.$invalid">
<div class="alert alert-warning" role="alert">3글자 이상 입력하세요.</div>
</div>
</form>
<br>
<ol class="list-unstyled">
<li ng-repeat="todo in todos | filter:statusFilter">
<date>날짜: </date>
<div class="input-group mb-3">
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input" ng-model="todo.complete">
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox" ng-model="todo.title">
<button class="btn btn-danger" type="button" id="button-addon2" ng-click="remove(todo)">삭제</button>
</div>
</li>
</ol>
<button class="btn btn-primary" ng-click="statusFilter={}">전체</button>
<button class="btn btn-primary" ng-click="statusFilter={complete:true}">완료</button>
<button class="btn btn-primary" ng-click="statusFilter={complete:false}">미완료</button>
</div>
</body>
</html>
//script.js
import angular from 'angular'; //CDN으로 삽입한 angular가 작동 안 해서 삽입
(function(){
var app = angular.module('todo',[]); //todo라는 모듈을 정의
app.controller('TodoCtrl', ['$scope', function($scope){
//todo 객체 배열로 만들기
$scope.todos = [
{
title: '요가수련',
complete: false,
createdAt: Date.now()
},
{
title: '앵귤러 학습',
complete: false,
createdAt: Date.now()
},
{
title: '운동',
complete: true,
createdAt: Date.now()
}
]
//버튼에 ng-click 추가 후 핸들러 등록
$scope.remove = function(todo){
//todos 객체에서 todo의 index 찾기
var idx = $scope.todos.findIndex(function(item){
return item.id === todo.id;
})
//index찾았으면 해당 index의 todo 제거
if(idx > -1){
$scope.todos.splice(idx, 1);
}
};
//추가 폼 동작 구현
$scope.add = function(newTodoTitle){
//newTodo 객체 만들기
var newTodo = {
title: newTodoTitle,
complete: false,
createdAt: Date.now()
};
//newTodo 객체를 배열에 추가하기
$scope.todos.push(newTodo);
//input 태그 값 비워주기
$scope.newTodoTitle = "";
};
}]);
})();
/*CSS*/
/*유효한 값일 때는 초록색*/
.input-group .ng-valid.ng-dirty{
border: solid 1px green;
}
/*유효하지 않은 값일 때는 빨간색*/
.input-group .ng-invalid.ng-dirty{
border: solid 1px red;
}
참고
- https://www.youtube.com/watch?v=EklH54kysps&list=PLs_XsVQJKaBk_JN5RctLmmVrGwEzpzqaj