Develop Reference

How to detect form value is updated or not on click of update button Angular

I have more than 15 fields in the form, If user open the form in Edit mode, and the value of the form is not updated, then it shows message value is not changed on click of update button. Otherwise if the form value is changed then it shows message "Data updated".
I don't need updated value, i just need to check the value is updated or not on button click.
Below is my code which i tried but this is not working on update button click.
HTML
<div>
<form id="editfrm" [formGroup]="Editunit">
<div>
<input type="text" formControlName="name" />
</div>
<div>
<input type="text" formControlName="code" />
</div>
</form>
</div>
<footer>
<button class="btn btn-secondary" type="reset" (click)="update(Editunit.value)">Edit</button>
</footer>
//Component.ts file
update(Editunit?) {
this.Editunit.valueChanges.subscribe((data) => {
if(data is changed){
alert("Data updated");
}else{
alert("form not updated");
}
return;
});
}

you can subscribe to valueChanges of the form and use pairwise to check if there was a change else if you "change" an input with the same value Angular give you changed
changed:boolean=false;
this.form.valueChanges.pipe(
takeWhile(()=>!this.changed),
startWith(this.form.value),
pairwise()
).subscribe(([old,value])=>{
let change=false;
Object.keys(old).forEach(k=>{
change=change || old[k]!=value[k]
})
this.changed=change;
})
Or simply get the olds values in a variable, and check the values
this.oldValues={...this.form.value} //after create the form
isChanged()
{
let change=false;
Object.keys(this.oldValues).forEach(k=>{
change=change || this.oldValues[k]!=this.form.value[k]
})
return change
}
See stackblitz

Not able to reset input field in laravel

I need to reset the input field when user clicks on the rest button, I have other content on the page which is getting cleared except input field, I'm not sure if this is happening because I'm using old values after post request.
<input type="text" name="app_number" class="form-control" onreset="this.value=''" value="{!! Request::input('app_number') !!}" id="app_number" placeholder="Application Number" required>
JS for reset button:
document.getElementById("appForm").onreset = function() {
document.getElementById("app_number").value = "";
};
Reset Button:
<button class="btn btn-primary" id="reset-button" type="reset">Reset</button>

Use type="reset" for your button:
<button type="reset">Cancel</button>

try using reset():
document.getElementById("app_number").reset();

In this case you must use JQuery Lib. Basic you need to set ID for this element. And in jquery you listen click on this Element.
$('#app_number').on('change', function () {
// enter code here
});

Please try to use in js like:
$(document).on('click', '#YourOnclickButtonID', function(){
var $alertas = $('#YourFormID');
$alertas.validate().resetForm();
});

So answering my own question, any feedback would be appreciated but this is working.
It turns out that no matter what value="{!! Request::input('app_number') !!}" will always have value as this code gets executed on the server side and unless you make another post request you can not change the value and by using only vanilla JS and without post request this cannot be done.
So, instead of getting values from Request why not just takes the values from user input and save it to local storage and then just grab it and inject into the input field.
I added onkeyup event ion to the input field
<input type="text" name="app_number" class="form-control" onkeyup='saveValue(this);' id="app_number" placeholder="Application Number" required>
and JS to store and retrieve input
document.getElementById("app_number").value = getSavedValue("app_number"); // set the value to this input
function saveValue(e) {
var id = e.id; // get the sender's id to save it .
var val = e.value; // get the value.
localStorage.setItem(id, val); // Every time user writing something, the localStorage's value will override .
}
//get the saved value function - return the value of "v" from localStorage.
function getSavedValue(v) {
if (!localStorage.getItem(v)) {
return ""; // You can change this to your defualt value.
}
return localStorage.getItem(v);
}
and then reset the form as usual
document.getElementById("appForm").onreset = function() {
document.getElementById("app_number").value = '';
};

Your reset button :
<button class="btn btn-primary" id="reset-button" onclick="myFunction()">Reset</button>
In js:
function myFunction(){
document.getElementById("app_number").value = "";
}

How to make it mandatory to select a value in Autoselect while using template

Scenario : we have a Kendo UI template. When a user tries to type atleast 2 charters data is populated in Autocomplete widget. I cannot use combobox as return data may be huge and combobox freezes. I want to force user to select a option from Auto complete dropdown and if nothing is returned from autocomplete or if user not select a data I want to clear the text field.The issue with my code is that everytime it clears the first row in the template and not the relevant one where data is not selected.
Template declaration
<script id="newTestTemplate" type="text/x-kendo-template">
<div id="testRec">
<input id="pSearchId" class="pSearch"
data-role="autocomplete"
data-placeholder="Select from dropdown"
data-text-field="name"
type="text"
data-bind="source: pSearchDS, value: name, events: {select: pSelected,open : pOpen,close : pClose}"
data-min-length="2"
data-highlight-first="true" maxlength="160" />
<input id="pDesc" data-role="textbox" placeholder="Description" class="k-textbox part-input" data-bind="value: description/> </div>
Javascript:
pOpen = function (e) {
valid = false;
}
pClose = function (e) {
if (!valid) {
$(e.sender).closest(".pSearch").val("");
$("#pDesc").val(''); //tried this way too
}
}
pSelected = function (e) {
valid = true;
}
Please suggest . If there is anyother way to force implement selection then let me know that too.

You can try the following on Autocomplete blur check if the user selected any value if not clear the values
$("#pSearchId").blur(function(){
if (!valid) {
alert("User not selected any value");
$("#pSearchId").val('');
$("#pDesc").val('');
}
});

For this I ended up putting validation on the click even to check if text box have a value.

Required field validation on submit in angular js

I have a requirement of displaying two required fields on page. I have a datePattern and required field check.
I need to display field is required on submit without entering fields . If I enter something my datePattern works fine. Since it is required when I display like
Ng-show = Form.field1.$error.required && Form.field1.$pristine. This displays required message on start but I want this on submit and once I edit my field datePattern comes into picture this is fine.
I have tried ng-click=submitted = true. And ng-submit=ctrl.submit() it's not entering into controller..
Can some one help...

I fixed this way
Form.$submitted && form.field1.$error.required && !form.field1.$touched

<form ng-submit="validateForm()">
<input ng-model="name">
<span ng-show="invalidName">Please fill name field</span>
</form>
controller('MyController', function ($scope){
$scope.validateForm = function(){
if($scope.name){
$scope.invalidName = true;
}
if($scope.invalidName){
//Prevent submit
return false;
}else{
//Handle submit here or do nothing for auto submit of form
}
};
});

The way I handle this (no promises that it is the best way) is that on the submit function I set each form field to $touched, then for each field I show the warning when the field is $error and $touched.
jsfiddle
HTML
<div ng-app="app" ng-controller="ctrl">
<div ng-form="forms.datesForm">
<input type="text" ng-model="date" name=date required />
<p ng-show="forms.datesForm.date.$touched && forms.datesForm.date.$invalid">Please select a date.</p>
<br />
Your date: {{date}}
<button ng-click="submitForm()">Submit</button>
</div>
<p ng-show="submitted">
Congrats, you submitted successfully!
</p>
</div>
JS
angular.module('app', []);
angular.module('app').controller('ctrl', ['$scope', function ($scope) {
$scope.forms = {};
$scope.submitForm = function() {
if ($scope.forms.datesForm.$invalid) {
setAllFieldsTouched($scope.forms.datesForm);
return;
}
else {
// do whatever submit logic here
$scope.submitted = true;
}
}
var setAllFieldsTouched = function () {
// loop through all the empty required fields
angular.forEach($scope.forms.datesForm.$error.required, function (field) {
// only forms have $submitted properties, not fields
if (field.hasOwnProperty('$submitted')) { // is a form, recur through it
setAllFieldsTouched(field);
}
else { // this is a field
field.$setTouched();
}
});
}
}]);

Enable a button on entering text in input field

I want to enable a button only when a text is entered on an input field. So far I have this code on my app.js
.controller("EnableDisable", function(){
$scope.editableInput = false;
})
.directive("inputDisabled", function(){
return function(scope, element, attrs){
scope.$watch(attrs.inputDisabled, function(val){
if(val)
element.removeAttr("disabled");
else
element.attr("disabled", "disabled");
});
}
});
This is the view implementation :
<div ng-controller="EnableDisable">
<input type="text" input-disabled="editableInput" />
<button ng-click="editableInput = !editableInput">enable/disable</button>
</div>
This is the plunk url:
https://plnkr.co/edit/bHtZJ1H5JvM2XTuhft6J?p=preview
Presently when I launch the app, the button is not disabled by default.
Please with the above challenge how can I make the button clickable (receive events)when a text is entered on the input field.
Kindly assist!

you can do this with Angular.
<input type="text" ng-model="textEntered" />
<button ng-disabled="!textEntered">Continue</button>

Try this one
controller("EnableDisable", function($scope){
$scope.textEntered = "";
});
HTML :
<button ng-disabled="!textEntered">enable/disable</button>
Please refer Plunker

You will have to set initial scope value like this.Note that I have set it false so condition will negate and make button disable on page load.Then I have set a watch on input value accordingly toggled the scope value.
var app = angular.module('plunker', []);
app.controller("EnableDisable", function(){
$scope.textEntered=false;
$scope.$watch($scope.textEntered,function(v)
{
if(v)
{
$scope.textEntered=true;
}
else
{
$scope.textEntered=false;
}
}
);
});
and html is -
<input type="text" ng-model="textEntered" />
<button ng-disabled="!textEntered">Continue</button>
https://plnkr.co/edit/o1Im8MSXbEa8kyqPqBB9?p=preview