Skip to content

Commit

Permalink
AngularForm Sample
Browse files Browse the repository at this point in the history
  • Loading branch information
rainer@software-architects.at authored and rainer@software-architects.at committed Nov 20, 2014
1 parent 65db3dd commit d1eb8f8
Show file tree
Hide file tree
Showing 3 changed files with 199 additions and 0 deletions.
2 changes: 2 additions & 0 deletions AngularTypeScriptSamples/AngularTypeScriptSamples.csproj
View file
Expand Up @@ -28,6 +28,7 @@
<Content Include="Content\css\select2x2.png" />
<Content Include="Content\ng-grid.css" />
<Content Include="Content\ng-grid.min.css" />
<TypeScriptCompile Include="samples\forms\angularForm.ts" />
<TypeScriptCompile Include="samples\hello-world\helloWorldWithController\helloWorldWithController.ts" />
<TypeScriptCompile Include="samples\communication\httpService\app.ts" />
<Content Include="fonts\glyphicons-halflings-regular.svg" />
Expand All @@ -52,6 +53,7 @@
<Content Include="samples\communication\httpService\NotificationsArchiveSpec.js">
<DependentUpon>MobileServicesTableSpec.ts</DependentUpon>
</Content>
<Content Include="samples\forms\angularForm.html" />
<Content Include="samples\hello-world\helloWorldWithController\code.js">
<DependentUpon>helloWorldWithController.ts</DependentUpon>
</Content>
Expand Down
128 changes: 128 additions & 0 deletions AngularTypeScriptSamples/samples/forms/angularForm.html
View file
@@ -0,0 +1,128 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Angular.js Samples Using TypeScript</title>

<link href="../../Content/bootstrap.css" rel="stylesheet" />

<script src="../../Scripts/jquery-2.1.0.js"></script>
<script src="../../Scripts/bootstrap.js"></script>
<script src="../../Scripts/angular.js"></script>
<script src="angularForm.js"></script>
</head>
<body ng-app="applicationApp" ng-controller="applicationForm">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-2">
<h1>Application Form</h1>
<form role="form" name="applicationForm">
<div class="alert alert-warning"
ng-show="applicationForm.$dirty">
Don't forget to save!
</div>
<div class="form-group" ng-class="getCssClasses(applicationForm.firstName)">
<label for="firstName">First Name:</label>
<input id="firstName" name="firstName" type="text" class="form-control" placeholder="Your first name ..."
required
ng-model="application.person.firstName" />
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input id="lastName" type="text" class="form-control" placeholder="Your last name ..."
required
ng-model="application.person.lastName" />
</div>
<div class="form-group">
<label>Sex:</label>
<div class="radio">
<label>
<input id="sex" type="radio" value="male"
ng-model="application.person.sex" /> Male
</label>
</div>
<div class="radio">
<label>
<input id="sex" type="radio" value="female"
ng-model="application.person.sex" /> Female
</label>
</div>
<select class="form-control" ng-model="application.person.sex">
<option value="male" ng-selected="application.person.sex=='male'">Male</option>
<option value="female" ng-selected="application.person.sex=='female'">Female</option>
</select>
<select class="form-control"
ng-options="so.code as so.description for so in sexOptions"
ng-model="application.person.sex"></select>
</div>
<div class="form-group" ng-class="getCssClasses(applicationForm.email)">
<label for="email">Email:</label>
<input id="email" name="email" type="email" class="form-control" placeholder="Your email ..."
required
ng-model="application.person.email"
ng-pattern="/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" />
<p>{{application.person.email}}</p>
</div>
<div class="form-group">
<label for="shortBio">Describe yourself in one sentence (max. 50 characters):</label>
<input id="shortBio" type="text" class="form-control" placeholder="Some words about you ..."
ng-maxlength="50"
ng-model="application.person.shortBio" />
<p>{{application.person.shortBio}}</p>
</div>
<div class="form-group">
<label for="firstJob">Is this your first job?</label>
<input id="firstJob" type="checkbox"
ng-model="application.person.firstJob" />
<div class="alert alert-danger"
ng-show="application.person.firstJob">
If this is your first job, you have to fill out form ABC!
</div>
</div>
<div class="form-group">
<label for="driverLicense">Do you have a B driver license?</label>
<input id="driverLicense" type="checkbox"
ng-true-value="'B'" ng-false-value="'None'"
ng-model="application.person.driverLicense" />
<p>{{application.person.driverLicense}}</p>
</div>

<div ng-repeat="language in application.person.languages">
<div class="row">
<div class="col-sm-5">
<select class="form-control" ng-model="language.language">
<option value="en" ng-selected="language.language=='en'">English</option>
<option value="de" ng-selected="language.language=='de'">Deutsch</option>
</select>
</div>
<div class="col-sm-5">
<select class="form-control" ng-model="language.knowledge">
<option value="fluent" ng-selected="language.knowledge=='fluent'">Fluent</option>
<option value="native" ng-selected="language.knowledge=='native'">Native</option>
</select>
</div>
<div class="col-sm-2">
<button class="btn" ng-click="removeLanguage($index)">X</button>
</div>
</div>
</div>

<p>&nbsp;</p>

<button type="button" class="btn btn-primary btn-large"
ng-disabled="!canSave(applicationForm)">
Save
</button>

<p>&nbsp;</p>

<div class="alert alert-danger"
ng-show="applicationForm.$invalid">
Form contains invalid data!
</div>
</form>
</div>
</div>
</div>
</body>
</html>
69 changes: 69 additions & 0 deletions AngularTypeScriptSamples/samples/forms/angularForm.ts
View file
@@ -0,0 +1,69 @@
class Person {
public firstName: string = "Max";
public lastName: string = "Muster";
public shortBio: string = "I am a funny guy!";
public email: string = "test@trash-mail.com";
public firstJob: boolean = false;
public driverLicense: string = "None";
public sex: string = "male";
public languages: Language[] = [
{ language: "en", knowledge: "fluent" },
{ language: "de", knowledge: "native" }
];
}

class Language {
public language: string;
public knowledge: string;
}

class Application {
public person: Person;

constructor() {
this.person = new Person();
}
}

interface ISexOptions {
code: string;
description: string;
}

interface IBootstrapValidationClasses {
"has-success": boolean;
"has-error": boolean;
}

interface IApplicationScope extends ng.IScope {
application: Application;
sexOptions: ISexOptions[];
getCssClasses: (modelController: ng.INgModelController) => IBootstrapValidationClasses;
canSave: (modelController: ng.INgModelController) => boolean;
removeLanguage: (index: number) => void;
applicationForm: ng.INgModelController;
}

class ApplicationController {
constructor($scope: IApplicationScope) {
$scope.application = new Application();
$scope.sexOptions = [
{ code: "male", description: "Male" },
{ code: "female", description: "Female" }
];
$scope.getCssClasses = (ngModelController) => {
return {
"has-success": ngModelController.$dirty && ngModelController.$valid,
"has-error": ngModelController.$dirty && ngModelController.$invalid,
};
};
$scope.canSave = (ngModelController) => ngModelController.$dirty && ngModelController.$valid;
$scope.removeLanguage = (index) => {
$scope.application.person.languages.splice(index, 1);
$scope.applicationForm.$dirty = true;
};
}
}

angular.module("applicationApp", [])
.controller("applicationForm", ['$scope', ApplicationController]);

0 comments on commit d1eb8f8

Please sign in to comment.