AngularJs Forms 분석 정보
angularjs
이 글에서는 주로 AngularJs Forms를 소개하고 관련 정보와 간단한 샘플 코드를 정리했습니다. 필요한 친구들이 참고할 수 있습니다.
컨트롤(입력, 선택, 텍스트 영역)은 사용자가 데이터를 입력하는 방법입니다. 양식은 관련 컨트롤을 그룹화하도록 설계된 이러한 컨트롤의 모음입니다.
양식과 컨트롤은 유효성 검사 서비스를 제공하므로 사용자는 잘못된 입력에 대한 메시지를 받을 수 있습니다. 이는 사용자가 즉각적인 피드백을 받고 오류 수정 방법을 알 수 있기 때문에 더 나은 사용자 경험을 제공합니다. 클라이언트 측 유효성 검사는 좋은 사용자 경험을 제공하는 데 중요한 역할을 하지만 쉽게 우회할 수 있으므로 신뢰할 수 없다는 점을 명심하세요. 보안 애플리케이션을 위해서는 서버 측 인증이 여전히 필요합니다.
1. 간단한 형식
양방향 데이터 바인딩을 이해하는 핵심 지시자는 ngModel입니다. ngModel은 모델에서 뷰로, 뷰에서 모델로 양방향 데이터 바인딩을 제공합니다. 또한 동작을 향상시키기 위해 다른 지시문에 API를 제공합니다.
<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="SimpleForm">
<head>
<meta charset="UTF-8">
<title>PropertyEvaluation</title>
<style type="text/css">
.ng-cloak {
display: none;
}
</style>
</head>
<body>
<p ng-controller="MyCtrl" class="ng-cloak">
<form novalidate>
名字: <input ng-model="user.name" type="text"><br/>
Email: <input ng-model="user.email" type="email"><br/>
性别: <input value="男" ng-model="user.gender" type="radio">男
<input value="女" ng-model="user.gender" type="radio">女
<br/>
<button ng-click="reset()">还原上次保存</button>
<button ng-click="update(user)">保存</button>
</form>
<pre class="brush:php;toolbar:false">form = {{user | json}}
saved = {{saved | json}}