我想创建一个包含多个字段的表单:姓名,姓氏,...并添加一个或多个电子邮件。第一个电子邮件字段是必填字段之后,他应该可以点击“添加电子邮件”添加新的电子邮件地址。他可以添加另外4封电子邮件(总共5封电子邮件)。
系统应验证电子邮件的格式是否正确,必要时显示消息并在数据库中注册数据。
这里我的控制器“ctrlAddContacts”和模块(app.js):
var app=angular.module('ContactsApp', ['ngRoute', 'ui.bootstrap', 'ngDialog']);
app.factory('HttpInterceptor', ['$q', '$rootScope', function($q, $rootScope) {
return {
// On request success
request : function(config) {
// Return the config or wrap it in a promise if blank.
return config || $q.when(config);
},
// On request failure
requestError : function(rejection) {
//console.log(rejection); // Contains the data about the error on the request.
// Return the promise rejection.
return $q.reject(rejection);
},
// On response success
response : function(response) {
//console.log(response); // Contains the data from the response.
// Return the response or promise.
return response || $q.when(response);
},
// On response failure
responseError : function(rejection) {
//console.log(rejection); // Contains the data about the error.
//Check whether the intercept param is set in the config array.
//If the intercept param is missing or set to true, we display a modal containing the error
if (typeof rejection.config.intercept === 'undefined' || rejection.config.intercept)
{
//emitting an event to draw a modal using angular bootstrap
$rootScope.$emit('errorModal', rejection.data);
}
// Return the promise rejection.
return $q.reject(rejection);
}
};
app.controller('ctrlAddContacts', function ($scope, ContactService){
$scope.title="Add a contact";
// Allow to create several fields EMAIL
$scope.emails = [
{
}];
$scope.log = function() {
console.log($scope.emails);
};
$scope.add = function() {
var dataObj = {email:''};
$scope.emails.push(dataObj);
}
$scope.submitForm = function(contact){
if($scope.ContactForm.$valid){
// Send the object to the backend for saving data
ContactService.addNewPerson(contact).success(function(Person){
$scope.ContactForm.$setPristine();
$scope.contact= Person;
});
}
}
});
我的工厂(appService.js)
app.factory('ContactService', function($http){
var factory={};
factory.addNewPerson=function(objContact){
//alert(objContact);
return $http.get('http://myapp/contacts.cfc?method=addNewPerson&jsStruct=' + JSON.stringify(objContact))
};
return factory;
})
后端(服务器)中的函数检索后端发送的参数objContact并正确执行查询(它正在工作)
此处我的观点(manageContact.html)
<h3>{{title}}</h3>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">Person Sheet</div>
</div>
<div class="panel-body">
<form name="ContactForm" class="form-horizontal" role="form" novalidate ng-submit="submitForm(contact)">
<div class="form-group">
<label for="txtLastName" class="col-sm-2 control-label">Last Name *</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="txtLastName" maxlength="100" placeholder="Enter Last Name" required ng-model="contact.LASTNAME">
</div>
</div>
<div class="form-group">
<label for="txtPhone" class="col-sm-2 control-label">Phone Number</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="txtPhone" maxlength="20" placeholder="Enter phone" ng-model="contact.PHONENUMBER">
</div>
</div>
<!---------------- FOR ADDING EMAILS FIELDS ------------ START --->
<div>
<div ng-repeat="email in emails">
<div class="form-group">
<label for="txtEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" name="txtEmail_" maxlength="100" placeholder="Enter Email" ng-model="contact.EMAIL">
</div>
</div>
</div>
<button ng-click="add()">Add Email</button>
</div>
<!---------------- FOR ADDING EMAILS FIELDS ------------ END--->
<div class="error-container"
ng-show="ContactForm.txtEmail.$dirty && ContactForm.txtEmail.$invalid">
<small class="error"
ng-show="ContactForm.txtEmail.$error.required">
Your email is required.
</small>
<small class="error"
ng-show="ContactForm.txtEmail.$error.minlength">
Your email is required to be at least 3 characters
</small>
<small class="error"
ng-show="ContactForm.txtEmail.$error.email">
That is not a valid email. Please input a valid email.
</small>
<small class="error"
ng-show="ContactForm.txtEmail.$error.maxlength">
Your email cannot be longer than 20 characters
</small>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-primary" value="Submit" ng-disabled="ContactForm.$invalid">
<a href="#/view-contacts/{{contact.ID}}" class="inline btn btn-primary">Cancel</a>
</div>
</div>
</form>
</div>
</div>
请你帮我改变5个字段的名称:txtEmail_1,控制器中的txtEmail_2和视图(创建新字段时)。
亲切的问候,
答案 0 :(得分:0)
您可以尝试以下方法来创建动态表单元素名称属性。
AlertDialog.Builder alertDialog = new AlertDialog.Builder(
Drawer.this);
alertDialog.setTitle(" Logout !!");
alertDialog.setMessage("Are you sure you want to logout the session?");
alertDialog.setIcon(R.drawable.ic_question);
alertDialog.setPositiveButton("YES",
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
Toast.makeText(getApplicationContext(),"You are successfully Logout",Toast.LENGTH_LONG).show();
}
});
alertDialog.setNegativeButton("NO",
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
dialog.cancel();
}
});
alertDialog.show();