I'm new to AngularJS, and I'm trying to figure out how to get a create post form in a modal to work, and push a post to firebase. I'm pulling my hair out.
Originally, "create post" was a link in the navbar that took you to a separate page (addPost.html) with a form on it.
I wanted to move the Create Post form to a bootstrap modal on the same page (welcome.html).
There is an edit form in a modal, and it works fine when editing an already created post. The delete post also works as well.
I can't figure out what I am doing wrong.
This is my welcome.html:
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<title>AngularJS & Firebase Web App</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="blog.css" rel="stylesheet">
</head>
<body ng-controller="WelcomeCtrl">
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#/welcome">Home</a>
<a class="blog-nav-item " href="#/addPost">Add Post</a>
</nav>
</div>
</div>
<div class="container">
<div class="page-header">
<h1>AngularJS & Firebase App</h1>
</div>
<p class="lead">Welcome home <b>{{username}}</b> !!</p>
<!-- BUTTON I CREATED TO TRIGGER THE CREATE POST MODAL -->
<p><button class="btn btn-xs btn-info" data-toggle="modal" data-target="#createModal">CREATE</button></p>
<!-- list of articles -->
<div class="list-group" ng-repeat="article in articles">
<a href="#" onclick="return false;" class="list-group-item active">
<h4 class="list-group-item-heading">{{article.title}}</h4>
<p class="list-group-item-text">{{article.post}}</p>
<span class="pull-right">
<button class="btn btn-xs btn-info" ng-click="editPost(article.$id)" data-target="#editModal">EDIT</button>
<button class="btn btn-xs btn-warning" ng-click="confirmDelete(article.$id)" data-target="#deleteModal" >DELETE</button>
</span>
</a>
</div>
</div>
<!-- footer -->
<footer class="footer">
<div class="container">
<p class="text-muted"></p>
</div>
</footer>
<!-- create modal -->
<div class="modal fade" id="createModal" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="editModalLabel">Create Post</h4>
</div>
<div class="modal-body">
<form ng-submit="AddPost()">
<div class="form-group">
<label for="recipient-name" class="control-label">Title:</label>
<input type="text" ng-model="article.title" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Post:</label>
<textarea ng-model="article.post" class="form-control" id="message-text"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input id="singlebutton" ng-disabled="!article.title || !article.post" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" />
</form>
</div>
</div>
</div>
</div>
<!-- edit modal -->
<div class="modal fade" id="editModal" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="editModalLabel">Update Post</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="recipient-name" class="control-label">Title:</label>
<input type="text" ng-model="postToUpdate.title" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Post:</label>
<textarea ng-model="postToUpdate.post" class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" ng-click="update()">Publish</button>
</div>
</div>
</div>
</div>
<!-- delete modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="text-align:center;">
<h4 class="modal-title" style="color:red;" id="deleteModalLabel">You are going to Delete this post forever !!</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" ng-click="deletePost()">Delete</button>
</div>
</div>
</div>
</div>
</body>
</html>
This is my welcome.js:
'use strict';
angular.module('myApp.welcome', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/welcome', {
templateUrl: 'welcome/welcome.html',
controller: 'WelcomeCtrl'
});
}])
.controller('WelcomeCtrl', ['$scope','$firebase','CommonProp', function($scope,$firebase,CommonProp) {
$scope.username = CommonProp.getUser();
var firebaseObj = new Firebase("https://yyear.firebaseio.com/Articles");
var sync = $firebase(firebaseObj);
$scope.articles = sync.$asArray();
$scope.editPost = function(id) {
var firebaseObj = new Firebase("https://yyear.firebaseio.com/Articles/" + id);
var syn = $firebase(firebaseObj);
$scope.postToUpdate = syn.$asObject();
$('#editModal').modal(); // triggers the modal pop up
};
$scope.update = function() {
var fb = new Firebase("https://yyear.firebaseio.com/Articles/" + $scope.postToUpdate.$id);
var article = $firebase(fb);
article.$update({
title: $scope.postToUpdate.title,
post: $scope.postToUpdate.post,
emailId: $scope.postToUpdate.emailId
}).then(function(ref) {
$('#editModal').modal('hide');
}, function(error) {
console.log("Error:", error);
});
};
$scope.confirmDelete = function(id) {
var fb = new Firebase("https://yyear.firebaseio.com/Articles/" + id);
var article = $firebase(fb);
$scope.postToDelete = article.$asObject();
$('#deleteModal').modal();
};
$scope.deletePost = function() {
var fb = new Firebase("https://yyear.firebaseio.com/Articles/" + $scope.postToDelete.$id);
var article = $firebase(fb);
article.$remove().then(function(ref) {
$('#deleteModal').modal('hide');
}, function(error) {
console.log("Error:", error);
});
};
$scope.AddPost = function(){
console.log("This was called.");
var title = $scope.article.title;
var post = $scope.article.post;
var firebaseObj = new Firebase("https://yyear.firebaseio.com/Articles");
var fb = $firebase(firebaseObj);
fb.$push({ title: title,post: post,emailId: CommonProp.getUser() }).then(function(ref) {
console.log(ref);
//$location.path('/welcome');
}).then(function(ref) {
$('#editModal').modal('hide');
}, function(error) {
console.log("Error:", error);
});
};
}]);
The original Create Post form in addPost.html that works looks like this:
<body ng-controller="AddPostCtrl">
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item " href="#/welcome">Home</a>
<a class="blog-nav-item active" href="#/addPost">Add Post</a>
</nav>
</div>
</div>
<div class="container" >
<form class="form-horizontal" ng-submit="AddPost()">
<fieldset>
<legend>Create Post</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="txtTitle">Title</label>
<div class="col-md-4">
<input id="txtTitle" name="txtTitle" ng-model="article.title" type="text" placeholder="placeholder" class="form-control input-md">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="txtPost">Post</label>
<div class="col-md-4">
<textarea class="form-control" id="txtPost" ng-model="article.post" name="txtPost" ></textarea>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<input id="singlebutton" ng-disabled="!article.title || !article.post" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" />
</div>
</div>
</fieldset>
</form>
</div><!-- /.container -->
The addPost.js file looks like this.
'use strict';
angular.module('myApp.addPost', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/addPost', {
templateUrl: 'addPost/addPost.html',
controller: 'AddPostCtrl'
});
}])
.controller('AddPostCtrl', ['$scope','$firebase','$location','CommonProp',function($scope,$firebase,$location,CommonProp) {
$scope.AddPost = function(){
var title = $scope.article.title;
var post = $scope.article.post;
var firebaseObj = new Firebase("https://yyear.firebaseio.com/Articles");
var fb = $firebase(firebaseObj);
fb.$push({ title: title,post: post,emailId: CommonProp.getUser() }).then(function(ref) {
console.log(ref);
$location.path('/welcome');
}, function(error) {
console.log("Error:", error);
});
}
}]);
I assumed that if I copied the the addPost function from addPost.js to the welcome.js file and then duplicated the edit form in welcome.html and modified it so it was similar to the Create Post form in addPost.html it would work.
Obviously it doesn't, but I don't know what I am doing wrong.
The modal pops up but the publish button doesn't do anything
I figured it out. I had my closing form tag in the wrong spot first of all in my create post modal.
The Create Post modal should be like this:
<div class="modal fade" id="createModal" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form ng-submit="AddPost()">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="editModalLabel">Create Post</h4>
</div>
<div class="modal-body">
<!-- Text input-->
<div class="form-group">
<label class="control-label" for="txtTitle">Title</label>
<input id="txtTitle" name="txtTitle" ng-model="article.title" type="text" placeholder="placeholder" class="form-control input-md">
</div>
<!-- Textarea -->
<div class="form-group">
<label class="control-label" for="txtPost">Post</label>
<textarea class="form-control" id="txtPost" ng-model="article.post" name="txtPost" ></textarea>
</div>
<!-- Button -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input id="singlebutton" ng-disabled="!article.title || !article.post" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" />
</div>
</form>
</div>
</div>
</div>
My addPost function in welcome.js should be like this:
$scope.AddPost = function(){
console.log("This was called.");
var title = $scope.article.title;
var post = $scope.article.post;
var firebaseObj = new Firebase("https://yyear.firebaseio.com/Articles");
var fb = $firebase(firebaseObj);
fb.$push({ title: title,post: post,emailId: CommonProp.getUser() }).then(function(ref) {
console.log(ref);
//$location.path('/welcome');
}).then(function(ref) {
$('#createModal').modal('hide');
}, function(error) {
console.log("Error:", error);
});
};
Related
I have bootstrap modal, and i want add red border to textarea when notes is empty..
Modal :
div class="modal fade" id="modal_reject" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="form-group has-error">
<label class="col-sm-2 control-label"> Add Note <b style="color:red;">*</b></label>
<div style="margin-left: 5%;margin-right: 5%;">
<textarea id="NOTES_REJECT_SV" name="NOTES" class="form-control" required style="height: 100px;"></textarea>
</div>
</div>
<div class="modal-footer ">
<button type="button" id="submit" form="form" style="width:150px;height:40px;text-align:center;" class="btn btn-ok pull-right" ">Reject</button>
<button type="button" class="btn btn-light pull-right" style="width:120px;height:40px;" data-dismiss="modal" >CANCEL</button>
</div>
</div>
</div>
and my Javascript :
$('#modal_reject').on('click', '#submit', function(event) {
event.preventDefault();
var notes = $("#NOTES_REJECT_SV").val();
// alert(NOTES);
console.log('notes',notes)
if(notes){
$('#NOTES_REJECT_SV').css('border-color', 'red'); // < not working
$('#modal_reject').modal('hide')
return false;
}
You can simply use .css to apply border border, 1px solid red if notes are empty and remove border as well once there is a value.
I have simplified your code as well.
Run snippet below to see it working.
$('#modal_reject').on('click', '#submit', function(event) {
event.preventDefault();
//Get the target input
var notesInput = $("#NOTES_REJECT_SV");
//Check value
if (notesInput.val()) {
//Hide Modal
$('#modal_reject').modal('hide')
//Remove border
$(notesInput).css('border', '1px solid #ced4da'); //Remove border
} else {
//Apply Border
$(notesInput).css('border', '1px solid red'); //Apply border
}
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_reject">
Open Modal
</button>
<!-- Modal -->
<div class="modal fade" id="modal_reject" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group has-error">
<label class="control-label"> Add Note <span class="text-danger">*</span></label>
<textarea id="NOTES_REJECT_SV" name="NOTES" class="form-control" required style="height: 100px;"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Or you can bind an event to 'keyup' event then it will check every character entered or deleted.
$('#modal_reject').on('click', '#submit', function(event) {
event.preventDefault();
var notes = $("#NOTES_REJECT_SV").val();
// alert(NOTES);
console.log('notes',notes)
if(notes){
$('#NOTES_REJECT_SV').css('border-color', 'red'); // < not working
$('#modal_reject').modal('hide')
}
return false;
});
$("#NOTES_REJECT_SV").on("keyup", function() {
if($(this).val().length == 0) {
$(this).addClass("redborder")
} else {
$(this).removeClass("redborder")
}
})
.redborder {
border: 2px solid red;
}
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<div class="form-group has-error">
<label class="col-sm-2 control-label"> Add Note <b style="color:red;">*</b></label>
<div style="margin-left: 5%;margin-right: 5%;">
<textarea id="NOTES_REJECT_SV" name="NOTES" class="form-control redborder" required style="height: 100px;"></textarea>
</div>
</div>
<div class="modal-footer ">
<button type="button" id="submit" form="form" style="width:150px;height:40px;text-align:center;" class="btn btn-ok pull-right" >Reject</button>
<button type="button" class="btn btn-light pull-right" style="width:120px;height:40px;" data-dismiss="modal" >CANCEL</button>
</div>
you need to call event directly on submit. i added this thing on jsFiddle you can check it here.
you should change your condition, try this :
if(!notes){//<==
$('#NOTES_REJECT_SV').css('border-color', 'red');
$('#modal_reject').modal('hide')
return false;
}
guys, I am trying to get values from the modal popup and update the values without page refresh in CodeIgniter can anyone help me how to do that
Here is my modal popup:
<td class='text-center'>
<form method="post" action="" id="emp-update">
<input type="hidden" name="emp_id" value="<?php echo $emp->id; ?>">
<button type="button" href="#updateEmp" onclick="getSummary(36)" class="btn btn-info btn-xs" data-toggle="modal"><i class='fas fa-edit'></i></button>
</form>
</td>
<div class="modal fade" id="updateEmp" tabindex="-1" role="dialog" aria-labelledby="updateEmp" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" id="modal-content">
<form action="" id="emp-create" class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Update Employee</h4>
</div>
<div class="modal-body" id="modal-body">
<div class="form-group">
<label for="emp_name" class="col-sm-4 control-label">Name : </label>
<div class="col-md-8">
<input type="text" id="emp_name" name="emp_name" class="form-control" placeholder="Name" />
</div>
</div>
<div class="form-group">
<label for="salary" class="col-sm-4 control-label">Salary: </label>
<div class="col-md-8">
<input type="text" id="salary" name="salary" class="form-control" placeholder="Salary" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" value="submit" class="btn btn-primary submit" id="submit">Update</button>
</div>
</form>
</div>
</div>
</div>
Here is my controller:
public function editEmp() {
if ($this->input->post('emp_id')) {
$id = $this->input->post('emp_id');
$data['empName'] = $this->Emp_model->getEmpName($id);
$this->load->view('template/header');
$this->load->view("employee/createemployee", $data);
$this->load->view('template/footer');
}
}
Here is my model:
function getEmpName($id) {
$this->db->select('*');
$this->db->from('employees');
$this->db->where('id', $id);
if ($query = $this->db->get()) {
return $query->result_array();
} else {
return false;
}
}
Can anyone help me how we can do that?
Hope this will help you :
Your model method getEmpName method should be like this :
function getEmpName($id) {
$this->db->select('*');
$this->db->from('employees');
$this->db->where('id', $id);
if ($query->num_rows() > 0 ) {
return $this->db->get()->row();
} else {
return false;
}
}
your mdoel html should be like this :
<div class="modal fade" id="updateEmp" tabindex="-1" role="dialog" aria-labelledby="updateEmp" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" id="modal-content">
<form action="" id="emp-update-form" class="form-horizontal">
<input type="hidden" name="emp_id" value="<?=$empName->id;?>">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Update Employee</h4>
</div>
<div class="modal-body" id="modal-body">
<div class="form-group">
<label for="emp_name" class="col-sm-4 control-label">Name : </label>
<div class="col-md-8">
<input type="text" id="emp_name" name="emp_name" class="form-control" placeholder="Name" value="<?=$empName->emp_name;?>" />
</div>
</div>
<div class="form-group">
<label for="salary" class="col-sm-4 control-label">Salary: </label>
<div class="col-md-8">
<input type="text" id="salary" name="salary" class="form-control" placeholder="Salary" value="<?=$empName->salary;?>" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" value="submit" class="btn btn-primary submit" id="submit">Update</button>
</div>
</form>
</div>
</div>
</div>
Replace Controller_name with your controller name in ajax url
$(function() {
$('#emp-update-form').on('submit',function(e){
var formdata = $(this).serialize();
alert('submit is working');
$.ajax({
type: "POST",
url: "<?=site_url('Controller_name/getEmployeeDetails');?>",
dataType: 'json',
data: formdata,
success: function(res) {
if (res)
{
alert(res.status);
}
},
});
e.preventDefault();
});
});
Your controller method getEmployeeDetails should be like this :
public function getEmployeeDetails()
{
//print_r($this->input->post());
$response['status'] = 'success';
echo json_encode($response);
exit;
}
you can try Ajax on submit your modal popup form
$("#emp-create").on("submit",function(){
var emp_data = $(this).serialize();
$.ajax({
url: 'your controller url to update the popup details',
data: emp_data,
type: 'POST',
success: function(){}
});
});
I want to create a button action create with disable/enable button then close model view:
// button: type="submit" class="btn btn-primary" data-dismiss="modal" ng-disabled="!newSong.name" ng-click="saveSong()" >Create
--> Issue: when ng-click done --> view modal did not close
The reason why your code was not working is because of $scope.newSong = {};
in this code:
$scope.saveSong = function () {
$scope.songs.push($scope.newSong);
$scope.newSong = {};
};
Whenever you are trying to submit the form $scope.newSong = {} is making it invalid.
HTML CODE
<div ng-app="myApp", ng-controller ="myController">
<div ng-repeat="id in songs">
<ul>
<li> Name song: {{id.name}} </li>
<li> Name artist: {{id.artist}} </li>
</ul>
</div>
<div class="col-lg-1"> <button type="button" class="btn btn-info glyphicon glyphicon-plus" data-toggle="modal" data-target="#myModal" ng-click="clear()"> Add New </button> </div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> Create New Song</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role ="form" name="formName" novalidate>
<div class="form-group" >
<label class="control-label col-sm-2"> Name* </label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" ng-model="newSong.name" required/>
<div class="custom-error" ng-show="formName.name.$dirty && formName.name.$invalid">
<p ng-show="formName.name.$invalid && !formName.name.$pristine" class="help-block"> name is required.</p>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Artist</label>
<div class="col-sm-10">
<input type="text" class="form-control"ng-model="newSong.artist">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" data-dismiss="modal" ng-disabled="!newSong.name" ng-click="saveSong()" >Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
<br/><br/>
Angular CODE
var myApp = angular.module('myApp',[]);
myApp.controller('myController', function($scope){
$scope.songs = [
{
"name": "Everybody",
"artist": "Backstreet Boys.",
"id": 1
},
{
"name": "Feel Like Makin' Love",
"artist": "Bad Company.",
"id": 2
},
{
"name": "Sister of Pearl",
"artist": "Baio.",
"id": 3
}];
$scope.newSong = {};
/* callback ng-click create */
$scope.saveSong = function () {
$scope.songs.push($scope.newSong);
// $scope.newSong = {};
};
$scope.clear = function(){
$scope.newSong = {};
$scope.$setPristine(true);
}
});
WORKING LINK
Hope that works :)
I want to set dirty flag for edited cells in the table. When I click the save button I need to check the edited field is dirty is true or not. Because X-editable is updating entire table cell values both edited and unedited cell values.I need to check what are all the edited fields using dirty flag and if that field is dirty then that fields only i have to save in to mongodb.
for that I used this line to set the $dirty:
$scope.Form.username.$dirty = true; // this throwing TypeError:$dirty is undefined error
$scope.Form.$dirty = true;
//it is working
html code:
<form name="profileform">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" id="myModal">
<!-- Modal content-->
<div class="modal-content" style="margin-top:135px">
<div class="modal-header">
<h4 class="modal-title pull-left"> Add New Role</h4>
<button type="button" class="close pull-right"
data-dismiss="modal" aria-hidden="true">
x
</button>
</div>
<div class="modal-body">
<div class="row" style="margin-bottom:1%">
<div class="col-xs-3">
<h6><strong>Role<span style="color:green;">*</span></strong></h6>
</div>
<div class="col-xs-9">
<input type="text" name="Name" class="form-control" ng-model="Role.RoleName" />
<!--<span class="error" ng-show="profileform.RoleName.$invalid ">Please enter a Role Name</span>-->
</div>
</div>
<div class="row" style="margin-bottom:1%">
<div class="col-xs-3">
<h6><strong> Description</strong></h6>
</div>
<div class="col-xs-9">
<textarea name="Description" style="width: 100%; max-height: 200px; max-width: 100%;"
ng-model="Role.Description" maxlength="255"></textarea>
</div>
</div>
<div class="row" style="margin-bottom:1%">
<div class="col-xs-3">
<h6><strong>IsActive?</strong></h6>
</div>
<div class="col-xs-9">
<input type="checkbox" name="IsActive" class="form-control" ng-model="Role.IsActive" style="width:20px;" />
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="AddRole()" ng-disabled="profileform.$invalid" data-dismiss="modal">Save</button>
<button class="btn btn-primary" data-dismiss="modal" ng-click="deselect()">Cancel</button>
</div>
</div>
</div>
</div>
</form>
controller code:
$scope.AddRole = function () {
debugger;
console.log($scope.profileform.RoleName.$dirty);
console.log($scope.profileform.Description.$dirty);
$http.post('/AddNewRole', $scope.Role).then(function (response) {
//console.log(response);
$notify.success('Success', 'record inserted Successfully');
refresh();
});
};
Because $dirty is not defined in username object,or username is itself not defined, To fix the issue you need to first define the username into the Form object also please make sue Form is also into the $scope.
$scope.Form.username = {};
Then you can add $dirty into the username object like below
$scope.Form.username['$dirty'] = true
$dirty : It will be TRUE, if the user has already interacted with the form or if the field has been modified.
Try this :
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function MyCtrl($scope) {
$scope.FormSubmit = function () {
console.log($scope.form.username.$dirty);
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<form name="form" novalidate class="simple-form">Name:
<input type="text" name="username" ng-model="user.name" required />
<br />
<input type="submit" ng-click="FormSubmit()" value="Save" />
</form>
</div>
Try with names not ng-model.
angular.module('exApp',[]).controller('ctrl', function($scope){
$scope.name="Mani"; $scope.emails = "mani#gmail.com";
$scope.sub = function(){
console.log($scope.frm.yourname.$dirty, $scope.frm.mail.$dirty);
$scope.frm.yourname.$dirty = true;
console.log("I was set '#true': " + $scope.frm.yourname.$dirty);
}
$scope.AddRole = function(){
console.log("Role name dirty check: "+ $scope.profileform.Name.$dirty);
console.log("Description dirty check: "+ $scope.profileform.Description.$dirty);
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="exApp" ng-controller="ctrl">
<form name="frm" novalidate ng-submit="sub()">
<input type="text" name="yourname" ng-model="name">
<input type="email" name="mail" ng-model="emails" required>
<input type="submit">
</form>
<br><br>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Add role
</button>
<form name="profileform">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" id="myModal">
<!-- Modal content-->
<div class="modal-content" style="margin-top:135px">
<div class="modal-header">
<h4 class="modal-title pull-left"> Add New Role</h4>
<button type="button" class="close pull-right"
data-dismiss="modal" aria-hidden="true">
x
</button>
</div>
<div class="modal-body">
<div class="row" style="margin-bottom:1%">
<div class="col-xs-3">
<h6><strong>Role<span style="color:green;">*</span></strong></h6>
</div>
<div class="col-xs-9">
<input type="text" name="Name" class="form-control" ng-model="Role.RoleName" />
<!--<span class="error" ng-show="profileform.RoleName.$invalid ">Please enter a Role Name</span>-->
</div>
</div>
<div class="row" style="margin-bottom:1%">
<div class="col-xs-3">
<h6><strong> Description</strong></h6>
</div>
<div class="col-xs-9">
<textarea name="Description" style="width: 100%; max-height: 200px; max-width: 100%;"
ng-model="Role.Description" maxlength="255"></textarea>
</div>
</div>
<div class="row" style="margin-bottom:1%">
<div class="col-xs-3">
<h6><strong>IsActive?</strong></h6>
</div>
<div class="col-xs-9">
<input type="checkbox" name="IsActive" class="form-control" ng-model="Role.IsActive" style="width:20px;" />
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="AddRole()" ng-disabled="profileform.$invalid" data-dismiss="modal">Save</button>
<button class="btn btn-primary" data-dismiss="modal" ng-click="deselect()">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</body>
I have a modal popup template which is for create and edit detail. It popup between create and edit by using angular and model to populate value. However,the modal popup does not reflect the create condition but does reflect the edit condition, which mean this part has been gone through when debugging
$scope.ID = 0;
$scope.Title = '';
$scope.modalHeader = "Add New List";
but when the modal popup, the Title field is not empty and header is not populated.
All in all, the debugger does reflect when click on edit and create button.
html:
<button class="btn btn-success" ng-disabled="error" data-toggle="modal" data-target="#addNewListModal" ng-controller="boardCtrl" ng-click="editList('new')">
<span class="glyphicon"></span>Add New List
</button>
<div class="row" ng-controller="boardCtrl">
<div id="loggedInUsername" hidden>#ViewBag.Username</div>
<div ng-include="'/AppScript/busyModal.html'" ng-show="isLoading"></div>
<div class="col-lg-3 panel panel-primary colStyle" id="{{toDoList.Id}}" kanban-board-drop="over"
ng-repeat="toDoList in toDoLists">
<div class="panel-heading" style="margin-bottom: 10px; text-align: center;">
<h3 class="panel-title">
{{toDoList.Title}}
<button class="btn pull-right" ng-disabled="error" data-toggle="modal" data-target="#addNewListModal" ng-click="editList($index)">
<span class="glyphicon glyphicon-pencil" style="color:blue"></span>
</button>
</h3>
</div>
<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#addNewTaskModal" data-tasklistid="{{toDoList.Id}}">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
<div class="thumbnail" draggable="true" kanban-board-dragg="toDoTask"
ng-repeat="toDoTask in toDoList.ToDoTasks" style="margin-bottom: 10px;">
<div class="caption">
<h5><strong>{{toDoTask.Title}}</strong></h5>
<p>{{toDoTask.Description}}</p>
<p><button href="#" class="btn btn-primary btn-sm" ng-click="FindToDoTask(toDoTask.Id);" data-toggle="modal" data-target="#editTaskModal">Edit</button>
</p>
</div>
</div>
</div>
ctrl.js:
$scope.editList = function (id) {
debugger;
if (id == 'new') {
//$scope.edit = true;
//$scope.incomplete = true;
$('#newListSubmit').removeAttr('disabled');
$scope.ID = 0;
$scope.Title = '';
$scope.modalHeader = "Add New List";
} else {
//$scope.edit = false;
$scope.ID = $scope.toDoLists[id].ID;
$scope.Title = $scope.toDoLists[id].Title.trim();
$scope.modalHeader = "Update List";
//$scope.incomplete = false;
}
};
modal:
<div id="addNewListModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="modalTitle" ng-model="modalHeader">{{modalHeader}}</h4>
</div>
<div class="modal-body" id="modalBody">
<!-- content goes here -->
<input type="text" hidden="hidden" ng-model="ID" name="ID">
<form id="newListForm" method="post">
<div class="form-group">
<label for="newListTitle">Title</label>
<input type="text" class="form-control" id="newListTitle" name="Title" placeholder="Enter Title" ng-model="Title">
</div>
</form>
</div>
<div class="modal-footer">
<button id="newListSubmit" type="submit" class="btn btn-default" ng-click="AddNewList();">Submit</button>
</div>
</div>
</div>
</div>
you have 2 instances of boardCtrl controller, one on the button:
<button class="btn btn-success"
ng-disabled="error"
data-toggle="modal"
data-target="#addNewListModal"
ng-controller="boardCtrl"
ng-click="editList('new')">
and other on the main div:
<div class="row" ng-controller="boardCtrl">
.....
</div>
they create different scopes (even if you will use same aliases like ng-controller="boardCtrl as bc"), so, just move your ngController to some common for both elements section and remove from the button and row div. For example, you may move the ngController to the body tag:
<body ng-controller="boardCtrl">
<button class="btn btn-success"
ng-disabled="error"
data-toggle="modal"
data-target="#addNewListModal"
ng-click="editList('new')">
<div class="row">
.....
</div>
</body>
plunker: http://plnkr.co/edit/boPkGYvAPzDywStMFp4c?p=preview