My Code:
<form role="form" #login="ngForm" (ngSubmit)="onSubmit(login.form)">
<div class="form-group">
<label class="control-label" for="adviserUsername">Username</label>
<input class="form-control" [(ngModel)]="adviserUsername" #username="ngModel" placeholder="Enter Username" type="text" name="adviserUsername"
required>
<div *ngIf="username.touched && username.errors">
<div class="alert alert-danger" *ngIf="username.errors.required">Username is required</div>
</div>
</div>
<div class="form-group">
<label class="control-label" for="password">Password</label>
<input class="form-control" [(ngModel)]="passwordText" #password="ngModel" id="password" name="password" placeholder="Password"
type="password" required>
</div>
<div class="alert alert-danger" *ngIf="password.touched && password.errors">Password is required</div>
<button type="submit" class="btn btn-block btn-lg btn-primary" (click)="login()" [disabled]="!login.valid">Login</button>
</form>
Error which I am getting is
self._NgForm_14_3.context is not a function
Here's a Snapshot
The Solution is simple
I was using a click event on the button click - which was using login() - this was double reference and created a problem ...
Code:
Line Fixed >>
<button type="submit" class="btn btn-block btn-lg btn-primary" [disabled]="!login.valid">Login</button>
Related
I am trying to make an edit profile page in which user can update its current email or pwd by inputting current email and password and then give new ones. I am also sending whole data of user(including username and password) when he sign in through viewdata.
#{
var user = (User)ViewData["User"];
}
<div class="account-info mt-3">
<fieldset class="border border-dark p-3">
<legend class="float-none w-auto">Account Info</legend>
<div class="mb-3 simpleinfo">
<label for="email" class="form-label">Enter Your Current Email</label>
<input type="email" class="form-control" name="Username" id="prevemail"/>
</div>
<div class="mb-3 simpleinfo">
<label for="prevpwd" class="form-label">Enter Your Current Password</label>
<input type="password" class="form-control" name="Pwd" id="prevpwd"/>
<button type="button" class="btn btn-success mt-4 checkcred">Update Credentials</button>
</div>
<div class="mb-3 simpleinfo">
<label for="email" class="form-label">Enter new Email</label>
<input asp-for="Username" disabled type="email" class="form-control" id="newemail">
</div>
<div class="mb-3 simpleinfo">
<label for="newpwd" class="form-label">Enter New Password</label>
<input type="password" disabled class="form-control" asp-for="Password" id="newpwd">
</div>
</fieldset>
</div>
Now i want to compare the email that user enters and the email that is present in the user object.
here's my code for this:
<script>
$('.checkcred').click(function() {
var prevemail = $('#prevemail').val();
var prevpassword=$('#prevpwd').val();
if(prevemail==#user.Username&&prevpassword==#user.Password)
{
alert("Validated");
}
else
{
alert("not validated");
}
});
</script>
But it is giving me syntax error on Console: Invalid or unexpected token.
Please lemme know what i am doing wrong.
I am just trying to have a horizontal form with labels on top. keep in mind I am going to add validation so grouping is important
I am looking for something like this
Name email ID
Mike Mike#hotmail.com something
code
<div class="col-lg-12">
<div class="row">
<div class="page-content">
<div class="panel panel-primary">
<form name="searchform" role="form" >
<fieldset>
<legend></legend>
<div class="form-horizontal">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-horizontal">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-horizontal">
<label for="exampleInputPassword1">Employee ID</label>
<input type="text" class="form-control" id="exampl">
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
this worked for me...let me know if there is a better solution
<form name="searchform" role="form" novalidate>
<fieldset>
<legend></legend>
<div class="col-lg-12">
<div class="row">
<div class="form-group col-xs-3 col-md-3">
<label for="Name" class="control-label"> Name</label>
<input type="text" value='' class="form-control" id="Name" placeholder="Name">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="associateID" class="control-label">Associate ID</label>
<input type="text" value='' class="form-control" id="associateID" placeholder="Associate ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="ID" class="control-label">ID</label>
<input type="text" value='' class="form-control" id="ID" placeholder="Racf ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="Role" class="control-label">Gateway Role</label>
<p-autoComplete [(ngModel)]="RoleVal" [suggestions]="iRole" name="gatewayRole" placeholder="Gateway Role" (completeMethod)="searchRole($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>
</div>
</div>
<div class="row">
<div class="form-group col-xs-3 col-md-3">
<label for="Name" class="control-label">Location</label>
<input type="text" value='' class="form-control" id="Name" placeholder=" Name">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="associateID" class="control-label">Associate ID</label>
<input type="text" value='' class="form-control" id="associateID" placeholder="Associate ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="racfID" class="control-label">ID</label>
<input type="text" value='' class="form-control" id="ID" placeholder="ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="gatewayRole" class="control-label">Role</label>
<p-autoComplete [(ngModel)]="RoleVal" [suggestions]="iRole" name="Role" placeholder="Role" (completeMethod)="searchyRole($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>
</div>
</div>
</div>
</fieldset>
</form>
I'd created a form in a bootstrap modal window.
Inside that form i use a input type text and a textarea.
<div class="modal fade" id="TestModal" 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">Test</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
#*Input 1*#
<div class="form-group">
<label for="input1">Input 1</label>
<input type="text" class="form-control" id="input1" required maxlength="75">
</div>
#*Input 2*#
<div class="form-group">
<label for="input2">Input 2</label>
<textarea class="form-control" id="input2" rows="18" required></textarea>
</div>
<div class="row">
#*Select 1*#
<div class="form-group col-lg-4">
<label for="select1">Select 1</label>
<select class="form-control" id="exampleSelect2" required>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
#*Input 3*#
<div class="form-group col-lg-4">
<label for="input3">Input 3</label>
<input type="text" class="form-control" id="input3" required>
</div>
#*Input 4*#
<div class="form-group col-lg-4">
<label for="input4">Input 4</label>
<input type="text" class="form-control" id="input4" required>
</div>
</div>
<button type="submit" class="btn btn-primary">Create</button>
</form>
</div>
</div>
</div>
The result is as follows:
How to set the same width for the text input and the textarea as for the 3 controls below them?
I solved like suggested in the second post here.
min-width: 100%
did the trick.
Do it with jQ class selector.
$(".modal-body.form-control").css("width","100px");
$(".modal-body.form-control").css("min-width","100px");
I want to show a popup readonly screen only to users who are not logged in as "Admin". So all the other users can see only the Popup readonly screen.
I try it like this:
#if (!User.Identity.IsAuthenticated || !User.IsInRole("Admin"))
{
<div id="eventContent" title="Event Details" style="display:none">
Date: <span id="startTime"></span><br>
Start event: <span id="eventTime"></span><br>
Duration: <span id="eventDuration"></span><br><br>
</div>
}
Thank you
I will make it more cleared
I have two screens:
#if (User.Identity.IsAuthenticated && !User.IsInRole("Admin"))
{
<div id="eventContent" title="Event Details" style="display:none">
Date: <span id="startTime"></span><br>
Start event: <span id="eventTime"></span><br>
Duration: <span id="eventDuration"></span><br><br>
</div>
}
<div class="container">
<div id='calendar' style="width:65%"></div>
</div>
#if (User.Identity.IsAuthenticated || Context.User.IsInRole("Admin"))
{
<div id="popupEventForm" class="modal hide" style="display: none;">
<div class="modal-header"> <h3> Appointment</h3></div>
<div class="modal-body">
<form id="EventForm" class="well">
<input type="hidden" id="eventID">
<div class="form-group">
<label>Event title</label>
<input type="text" id="eventTitle"><br />
</div>
<div class="form-group">
<label>Scheduled date</label>
<input type="text" id="eventDate" readonly><br />
</div>
<div class="form-group">
<label>Scheduled time</label>
<input type="text" id="eventTime"><br />
</div>
<div class="form-group">
<label>Appointment length (minutes)</label>
<input type="text" id="eventDuration"><br />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnPopupCancel" data-dismiss="modal" class="btn btn-mini">Cancel</button>
<button type="button" id="btnPopupSave" data-dismiss="modal" class="btn btn-success ">Save event</button>
#*<button type="button" id="btnPopupUpdate" data-dismiss="modal" class="btn btn-warning">Update event</button>*#
<button type="button" id="btnPopupDelete" data-dismiss="modal" class="btn btn-danger right ">Delete event</button>
</div>
</div>
}
eventContent - is for users who are not admin(it is readonly) and the other screen is for admin, where the admin can add a agenda item. But if I click now on a agenda item(not logged in as admin) I see both screens
Oke, I found it:
#if ( !Context.User.IsInRole("Admin"))
{
<div id="eventContent" title="Event Details" style="display:none">
Date: <span id="startTime"></span><br>
Start event: <span id="eventTime"></span><br>
Duration: <span id="eventDuration"></span><br><br>
</div>
}
else
{
<div id="popupEventForm" class="modal hide" style="display: none;">
<div class="modal-header"> <h3> Appointment</h3></div>
<div class="modal-body">
<form id="EventForm" class="well">
<input type="hidden" id="eventID">
<div class="form-group">
<label>Event title</label>
<input type="text" id="eventTitle"><br />
</div>
<div class="form-group">
<label>Scheduled date</label>
<input type="text" id="eventDate" readonly><br />
</div>
<div class="form-group">
<label>Scheduled time</label>
<input type="text" id="eventTime"><br />
</div>
<div class="form-group">
<label>Appointment length (minutes)</label>
<input type="text" id="eventDuration"><br />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnPopupCancel" data-dismiss="modal" class="btn btn-mini">Cancel</button>
<button type="button" id="btnPopupSave" data-dismiss="modal" class="btn btn-success ">Save event</button>
#*<button type="button" id="btnPopupUpdate" data-dismiss="modal" class="btn btn-warning">Update event</button>*#
<button type="button" id="btnPopupDelete" data-dismiss="modal" class="btn btn-danger right ">Delete event</button>
</div>
</div>
}
It looks like you are getting any Authenticated User in your If condition. Try changing it to:
#if (User.Identity.IsAuthenticated && !User.IsInRole("Admin"))
{
to get only authenticated users that are not admin.
If you mean anybody (authenticated or otherwise) that is not admin:
#if (!User.IsInRole("Admin"))
{
I have a model BOOK that will insert the book details through angularjs controller
Here is my view:
<h1 align="center">Books</h1>
<div ng-controller="BooksCtrl" class="container">
<div class="row-fluid">
<div class="col-md-6">
<form ng-submit="addBook()" class="loginform cf">
<input type="text" ng-model="newBook.title" placeholder="Title of the Book" required>
<input type="text" ng-model="newBook.isbn" placeholder="ISBN Number of Book" required>
<input type="file" ng-model="newBook.book_link">
<input type="text" ng-model="newBook.edition" placeholder="Edition of the book" required>
<input type="text" ng-model="newBook.publication_id" placeholder="Select the publication ID" required>
<input type="submit" value="Add Book">
</form>
<div ng-show="editorEnabled" class="loginform cf">
<form ng-submit="update()">
<input type=text ng-model="editableBook.title" ng-show="editorEnabled" required>
<input type=text ng-model="editableBook.body" ng-show="editorEnabled" required>
<input type="submit" value="Update" class='btn'>
close
</form>
</div>
<div ng-show="selectedBook" class="loginform cf">
<h2>{{selectedBook.title}}</h2>
<p>{{selectedBook.body}}</p>
</div>
</div>
<div class="col-md-6">
<ul style="list-style-type: none;">
<li ng-repeat="book in books" class="loginform cf" >
<div>
<div>{{book.title}}</div>
<a href="">
<img src="{{book.book_link.thumb.url}}"/>
</a>
<button href="#" ng-click="showBook(book)" class="btn">Show</button>
<button href="#" ng-click="enableEditor(book)" class="btn">edit</button>
<br>
</div>
</li>
</ul>
</div>
</div>
</div>
My angularjs Controller function is:
book = Book.save($scope.newBook, function(data,headers) {
console.log(book);
$scope.books.push(book);
}, function(data,headers) {
// do the error case
console.log(data);
if (data.status == 422)
{
alert("validation is failed book should be unique");
}
});
The problem is that it is storing all the details except the book pdf upload. It is not passing even the name. How can I solve this? Any Suggestions would be appreciated.