ngOninit runs only once – form is not updated

Issue I have material sidenav container with material navigation list: <mat-sidenav-container class=”cont”> <mat-sidenav #drawer mode=”side” opened role=”navigation”> <mat-nav-list> <table> <tr *ngFor = “let thing of values”> <td> <button [class.selected]=”thing === selectedThing” (click) = “onSelectedThing(thing)”>{{thing.Date}}</button> </td> </tr> </table> </mat-nav-list> </mat-sidenav> <mat-sidenav-content>

Continue reading

Form validation not working for simple email field

Issue Form validation is not working when i use to validate the email. Here is my code <form id=”forgetForm” class=”form-horizontal” role=”form”> <input placeholder=”Email” class=”text_box1″ type=”email” name=”email” ng-model=”forget.email” required=”required”> <span class=”errorMessage” ng-show=”forgetForm.email.$error.email && !forgetForm.email.$pristine” class=”help-inline”>Email is not valid</span> <span class=”errorMessage” ng-show=”forgetForm.email.$error.required

Continue reading

How to use submit button to search the record in a table?

Issue Here is my index.html page ——index.html——- <!DOCTYPE html> <html> <head> <script data-require=”angular.js@1.4.0-beta.6″ data-semver=”1.4.0-beta.6″ src=”https://code.angularjs.org/1.4.0-beta.6/angular.js”></script> <script src=”script.js”></script> </head> <body> <div ng-app=”myApp” ng-controller=”PeopleCtrl”> <input type=”text” name=”search1″ > <input type=”submit” ng-model=”search1″ value=”search” ng-click=”checkAll”> <table border=”1″ ng-init=”ageToShow=(people| underTwenty: 20).length >= 1″> <tr name=”search1″

Continue reading

Angularjs validation issue for password field

Issue Here is my angularjs code for the password field : <input type=”password” class=”form-control” name=”password” ng-model=”signup.registerPassword” ng-minlength=”8″ > <small class=”errorMessage” data-ng-show=”signupForm.registerPassword.$dirty && signupForm.registerPassword.$error.minlength”> Minimum 8 characters.</small> <small class=”errorMessage” data-ng-show=”signupForm.registerPassword.$dirty && signupForm.registerPassword.$error.required”> Enter password again.</small> when I type the password below

Continue reading

angular- bind form submit with multiple buttons

Issue I have a form with multiple submit buttons: <form name=”myForm” customSubmit> <input type=”text” ng-minlength=”2″> <button type=”submit” ng-click=”foo1()”></button> <button type=”submit” ng-click=”foo2()”></button> </form> and a directive: angular.module(‘customSubmit’, []) .directive(‘customSubmit’, function() { return { require: ‘^form’, scope: { submit: ‘&’ }, link:

Continue reading

Simple submit form using Angular

Issue I’m new to Angular, but very old with google. I cannot find out how to submit this form using Angular, like how we do in jQuery. <form> <input type=”text” /> <button type=”button” class=”saveDraft”>Save Draft</button> <button type=”submit”>Submit</button> <form> I want

Continue reading

Angular form not working in a table

Issue I created a working form placed in a div below a table; <div class=”row”> <form class=”form-signin” ng-submit=”controller.add.save()”> <h2 class=”form-signin-heading”>Add an item:</h2> <label for=”inputName” class=”sr-only”>Name</label> <input type=”text” name=”name” id=”inputName” class=”form-control” placeholder=”Name” required autofocus ng-model=”controller.add.name”> <label for=”inputDescription” class=”sr-only”>Description</label> <textarea name=”description” id=”inputDescription”

Continue reading

ng-pattern doesn't show $error.pattern

Issue I have script here and ng-pattern works correctly because scope.subnet is shown in Output only after input matches pattern. But ng-show doesn’t display any error if ng-pattern is not matched <body ng-contoller=”myConfigGenCtr”> <form novalidate name=”myForm”> <div class=”form-group”> <label for=”hostname”>Firewall

Continue reading

Clear an Angular form upon Submission

Issue I’m trying to clear the form, but keep facing some issues. How can I clear the form on a submit? HTML <form id=”contact” class=”contact-form” ng-submit=”sendMail()” novalidate ng-controller=”QuoteCtrl”> <div class=”message”></div> <div class=”col-md-5 col-sm-5 col-xs-12 animated hiding” data-animation=”slideInLeft”> <div class=”form-group”> <input

Continue reading

My AngularJS validation does not work. I have added ng-required

Issue My AngularJS validation does not work. I have added ng-required. Please let me know where I am missing <ng-form id=”frmdisbursementScheduleMaintenance”> <div style=”padding-bottom: 8px;”> <button id=”cm-SaveBtn” name=”cm-SaveBtn” type=”button” ng-click=”submitted=true”>Save</button> <button id=”cm-RefreshBtn” name=”cm-RefreshBtn” type=”button”>Refresh</button> </div> <div> <table> <tr> <td><span class=”VNAVLabel”>Process Begin

Continue reading

My AngularJS validation does not work. I have added ng-required

Issue My AngularJS validation does not work. I have added ng-required. Please let me know where I am missing <ng-form id=”frmdisbursementScheduleMaintenance”> <div style=”padding-bottom: 8px;”> <button id=”cm-SaveBtn” name=”cm-SaveBtn” type=”button” ng-click=”submitted=true”>Save</button> <button id=”cm-RefreshBtn” name=”cm-RefreshBtn” type=”button”>Refresh</button> </div> <div> <table> <tr> <td><span class=”VNAVLabel”>Process Begin

Continue reading

Angular validators and ng-maxlength use

Issue I’ve got the following div, which I want to add the bootstrap’s class “has-error” if the input length is over 50 characters. This is the HTML: <div class=”form-group” ng-class=”{has-error:[formData.titulo.$error]}”> <label for=”inputTitulo”>Título</label> <input type=”titulo” class=”form-control” id=”inputTitulo” maxlength=”50″ ng-maxlength=”50″ ng-model=”formData.titulo”> </div>

Continue reading

How do I get the value of a text field using AngularJS?

Issue I want to get the value of a text field value using AngularJS when a form is submitted. The code below always shows “undefined”. html: <form ng-submit=”AdvanceSearchSubmit($event)” name=”AdvanceSearch” novalidate> <p ng-show=”!AdvanceSearch.SearchKeyWord.$pristine && AdvanceSearch.SearchKeyWord.$invalid” class=”text-danger”>Text Cannot Be Empty!</p> <div ng-hide=”AdvanceSearchModel”

Continue reading

Angular form is $valid when all inputs are blank, why?

Issue My form is showing up as valid even though all of my input fields are blank. I have the required keyword in the input fields. <!DOCTYPE html> <html ng-app=”myApp”> <head> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css”> <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script> <script type=”text/javascript” src=”/components/angular/angular.min.js”></script> <script

Continue reading

AngularJS – Prevent submission of a form if it is invalid

Issue I have created an isolated case of my issue: http://plnkr.co/edit/6LXW5TG76LC9LNSrdpQC Here is the code of the isolated case: <!DOCTYPE html> <html ng-app="App"> <head></head> <body ng-controller="ExampleController"> <form name="form" ng-submit="submit()" novalidate> <input type="number" name="number" ng-model="number" required><br> <span ng-show="form.number.$error.required && form.number.$touched">Required<br></span> <span

Continue reading

Create many forms in one component

Issue I’m trying to create many forms in one component. I’ve tried to implement this with mat-tab-groups <mat-tab-group> <mat-tab label="form1"> <form>…</form> </mat-tab> <mat-tab label="form2"> <form>…</form> </mat-tab> </mat-tab-group> I have these functions that create the forms in the ts: createForm1(){ this.form

Continue reading

send Rating via email form

Issue I’m building an email form. In this email form, there is a star rating with radio buttons: <span class=”star-rating”> <input type=”radio” name=”rating” id=”rating” value=”1″><i></i> <input type=”radio” name=”rating” id=”rating” value=”2″><i></i> <input type=”radio” name=”rating” id=”rating” value=”3″><i></i> <input type=”radio” name=”rating” id=”rating” value=”4″><i></i>

Continue reading

Form change and validity in angularjs

Issue Whenever any non-readonly input in my form changes and the form is valid, I want to do certain action. Let’s say, my form looks like <form name=”form” novalidate> <input ng-model=’input.a’ required/> <input ng-model=’input.b’ required/> <input value='{{output.p | number: 2}}’

Continue reading

angularjs – not able to invalidate input (Object doesn't support property or method '$setValidity')

Issue I try to do the following if ($scope.RetypePassword != $scope.resource.Password) { $scope.resource.Password.$setValidity(“missmatch”, false); } else { $scope.resource.Password.$setValidity(“missmatch”, true); } but fail with this error TypeError: Object doesn’t support property or method ‘$setValidity’ What can the reason be? resource.Password is

Continue reading

(Editing Angular 5) I can't get the values of the object that is in NgModel

Issue I could not get the object of this field component.html <div class=”form-group”> <input type=”number” name=”totalPrice” class=”form-control” #lastname=”ngModel”[(ngModel)]=”invoiceService.selectedInvoice.totalPrice” readonly> </div> <!– working ok –> <div class=”form-group”> <input type=”number” name=”purchases” class=”form-control” #purchases=”ngModel” [(ngModel)]=”invoiceService.selectedInvoice.purchases[‘product’]” readonly> </div><!– not working –> this the element

Continue reading

Why is my button not appearing on the page?

Issue I have this form in a partial: <%= form_for current_user.relationships.build(:followed_id => @profile.user.id) do |f| %> <div><%= f.hidden_field :followed_id %></div> <div class=”follow_button”><%= f.submit “Follow” %></div> <% end %> that is rendered to my profile view. Here is the resulting html:

Continue reading

HTML & Angular Material disable save button from outside div when form fields are empty

Issue I have the following Angular Material form with the Close and Save buttons in an outside div for design reasons: <h1 mat-dialog-title>Product Page</h1> <div mat-dialog-content> <form [formGroup]="productForm"> <mat-form-field appearance="outline"> <mat-label>Name</mat-label> <input formControlName="name" required matInput placeholder="Name" style="text-transform:uppercase"> </mat-form-field> <mat-form-field appearance="outline">

Continue reading

Get JSON data on HTML Form Submit with HTTP POST

Issue I am trying to get JSON data on click of a button Heres the HTML for it <html> <title> </title> <body> <h2> Main API – http://api.kalendern.se/api</h3> <form method="get" enctype="application/json; charset=utf-8" action="http://api.example.com" border="1"> <input type=submit value="Show Main API"> </td> </form>

Continue reading

Getting all form values by JavaScript

Issue I have form: <form onchange="allvaluestostring()"> <select name="status"> <option value="*">All</option> <option value="1">Active</option> <option value="0">Inactive</option> </select> <select name="size"> <option value="*">All</option> <option value="small">Small</option> <option value="big">Big</option> </select> </form> And the onchange action of any input in form I need to get a JavaScript

Continue reading