I have 2 inputs where I enter value and concat it into new one
Here is code from HTML
<div class="form-group">
<label>{{l("FirstName")}}</label>
<input #firstNameInput="ngModel" class="form-control" type="text" name="name" (ngModelChange)="onNameChange()" [(ngModel)]="landlord.firstName" required maxlength="32">
<validation-messages [formCtrl]="firstNameInput"></validation-messages>
</div>
<div class="form-group">
<label>{{l("LastName")}}</label>
<input #lastNameInput="ngModel" class="form-control" type="text" name="name" (ngModelChange)="onNameChange()" [(ngModel)]="landlord.lastName" required maxlength="32">
<validation-messages [formCtrl]="lastNameInput"></validation-messages>
</div>
And concat value I show in this field
<div class="form-group">
<label>{{l("OrganizationName")}}</label>
<input #organizationName="ngModel" class="form-control" type="text" name="organizationName" [(ngModel)]="landlord.organizationName" required maxlength="500">
<validation-messages [formCtrl]="organizationName"></validation-messages>
</div>
Here is code from ts file
onNameChange() {
this.landlord.organizationName = `${
this.landlord.firstName ? this.landlord.firstName : ''
} ${this.landlord.lastName ? this.landlord.lastName : ''}`;
}
My problem, that last character is deleted from firstName or lastName
How I can fux this stuff?
Your ngModelChange event is firing before the model is actually updated, so with the current value at the time the event is fired, prior to the change. Likely to do with the ordering of (ngModelChange) and [(ngModel)] in your template.
Change your event to fire on (input) and it will get the most recent value.
<div class="form-group">
<label>{{l("FirstName")}}</label>
<input #firstNameInput="ngModel" class="form-control" type="text" name="name" (input)="onNameChange($event)" [(ngModel)]="landlord.firstName" required maxlength="32">
</div>
OR
Change the order of your attributes in your template:
<div class="form-group">
<label>{{l("FirstName")}}</label>
<input #firstNameInput="ngModel" class="form-control" type="text" name="name" [(ngModel)]="landlord.firstName" (ngModelChange)="onNameChange()" required maxlength="32">
</div>
Stackblitz: https://stackblitz.com/edit/angular-p7ecgh
Related
New to jquery but I am working on a responsive calendar. Now I have a start date and an end date field. If the end date is populated, the reoccurrence check box shows as it removes it from the not-visible class.
How can I add a check on the start date also? I want the check box to show when both of the start and end fields are filled not just one.
$("#end_date").on("input", function (){
if($('#end_date').length >= 1) {
$("#reoccurrence").removeClass('not-visible');
} else {
$("#reoccurrence").addClass('not-visible');
}
});
.not-visible {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<div class="md-form md-form-container-fix">
<input type="text" id="start_date" class="form-control date-picker" name="start_date" required />
<label for="start_date">Start Date</label>
</div>
</div>
<div class="col">
<div class="md-form md-form-container-fix">
<input type="text" id="end_date" class="form-control date-picker" name="end_date" required />
<label for="end_date">End Date</label>
</div>
</div>
<div class="form-check not-visible" id="reoccurrence" name="reoccurrence">
<input class="form-check-input" type="checkbox" id="is_reoccurring" name="is_reoccurring" value="1" />
<label class="form-check-label" for="is_reoccurring"> Reoccurrence? </label>
</div>
In this context, using length will tell you whether that input exists in the DOM (0 = doesn't exist, 1 = exists), but it won't evaluate the values of the inputs.
length
The number of elements in the jQuery object.
The number of elements currently matched.
Instead, I recommend using val() to verify that the values of both inputs are not empty strings.
In the demonstration below, I define each input and the "reoccurrence" element as variables. I use add() to combine the two inputs and bind the event handler to both. Alternatively, you could simply select both inputs: $("#start_date,#end_date"); see multiple selector.
Upon input, I define a boolean "oneEmpty" variable based on the values of both inputs. Then, I use toggleClass() to "add or remove one or more classes ... depending on ... the value of the state argument."
When either input is empty, the "oneEmpty" state is true and the "not-visible" class is toggled on. When both inputs are filled, the state is false and the class is toggled off.
var $start_date = $('#start_date');
var $end_date = $('#end_date');
var $reoccurrence = $("#reoccurrence");
$start_date.add($end_date).on("input", function() {
let oneEmpty = $start_date.val() == '' || $end_date.val() == '';
$reoccurrence.toggleClass('not-visible', oneEmpty);
});
.not-visible {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<div class="md-form md-form-container-fix">
<input type="text" id="start_date" class="form-control date-picker" name="start_date" required />
<label for="start_date">Start Date</label>
</div>
</div>
<div class="col">
<div class="md-form md-form-container-fix">
<input type="text" id="end_date" class="form-control date-picker" name="end_date" required />
<label for="end_date">End Date</label>
</div>
</div>
<div class="form-check not-visible" id="reoccurrence" name="reoccurrence">
<input class="form-check-input" type="checkbox" id="is_reoccurring" name="is_reoccurring" value="1" />
<label class="form-check-label" for="is_reoccurring"> Reoccurrence? </label>
</div>
In angular js, we have $submitted to populate error messages on submit click.
How can we display all validation errors on submit click in Angular
HTML:
<form #nameForm="ngForm" novalidate (ngSubmit)="saveNameForm(formModel)">
<div class="form-group">
<label for="inputName" class="form-control-label"> Name</label>
<input type="text" id="inputName" name="lotCode [(ngModel)]="formModel.name" #lotCode="ngModel" aria-describedby="nameHelp"
autocomplete="new-password" required>
<small id="nameHelp" class="text-danger" *ngIf="lotCode.invalid && lotCode.touched">Required</small>
</div>
<div class="form-group">
<label for="inputDescription" class="form-control-label"> Description</label>
<input type="text" id="inputDescription" name="desCode" [(ngModel)]="formModel.description" #desCode="ngModel" aria-describedby="descriptionHelp"
autocomplete="new-password" required>
<small id="descriptionHelp" class="text-danger" *ngIf="desCode.invalid && desCode.touched">Required</small>
</div>
<button type="submit">Submit </button>
</form>
Component:
export class AppComponent {
formModel: FormModel= new FormModel();
saveNameForm(formModel){
console.log(formModel)
}
}
export class FormModel {
name: string;
description:string;
}
https://stackblitz.com/edit/angular-rizsuy?file=src%2Fapp%2Fapp.component.ts
Here is the solution:
https://stackblitz.com/edit/angular-8jaaqz?file=src%2Fapp%2Fapp.component.html
You should use a variable to set submitted
if submitted then will display error
Angular uses the same form validation that native HTML5 does. Just do this in an Angular context. In the following example, we can use *ngIf to control the display of the messages, and .dirty and .touched to determine if the user interacted with the input.
Example from docs:
<input id="name" name="name" class="form-control"
required minlength="4" appForbiddenName="bob"
[(ngModel)]="hero.name" #name="ngModel" >
<div *ngIf="name.invalid && (name.dirty || name.touched)"
class="alert alert-danger">
<div *ngIf="name.errors.required">
Name is required.
</div>
<div *ngIf="name.errors.minlength">
Name must be at least 4 characters long.
</div>
<div *ngIf="name.errors.forbiddenName">
Name cannot be Bob.
</div>
</div>
I have three inputs:
<input type="text" class="form-control" id="friend-email-input" placeholder="Email" />
<input type="text" class="form-control" id="friend-email-input" placeholder="Email" />
<input type="text" class="form-control" id="friend-email-input" placeholder="Email" />
How to add a new input if this three inputs adn previous are filled ?
I am using angular route and I would rather use Angular.
Thanks.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<input type="text" class="form-control" ng-model="field1" placeholder="Email" />
<input type="text" class="form-control" ng-model="field2" placeholder="Email" />
<input type="text" class="form-control" ng-model="field3" placeholder="Email" />
<input ng-show="field1.length && field2.length && field3.length" type="text" class="form-control" ng-model="field4" placeholder="Email" />
</div>
Assign each input a model and then use ng-show to only display the 4th input if the length of the models are truthy (ie: nonzero).
in your controller keep track of all the inputs that you need, starting from
$scope.inputs = [{value: ""}, {value: ""}, {value: ""}];
in your template you are going to iterate on this array to show the inputs yoou have
<div ng-app="main" ng-controller="MainController">
<div ng-repeat="input in inputs track by $index">
<input type="text" class="form-control" placeholder="Email" ng-model="input.value"/>
<button ng-click="remove($index)">Remove</button>
</div>
<button ng-click="addInput()">Add Input</button>
</div>
So when the remove button of an input is clicked that input gets removed if there are more than 3 inputs present
If the add input button is pressed we append an input text with a remove button
$scope.remove = function(index){
if($scope.inputs.length > 3){
$scope.inputs.splice(index, 1);
}
}
$scope.addInput = function(){
$scope.inputs.push({value: ""})
}
here is an example codepen
How in angular when a checkbox is uncheck, the form data will be reset.
<div class="form-group">
<input type="text" verify-store ng-model="user.merchant_store_name" class="form-control" name="merchant.store_name" placeholder="Store Name" ng-model-options="{ updateOn: 'blur' }" required>
<div ng-if="signupForm.$pending.usernameExists">verifying....</div>
<div ng-if="signupForm.$error.usernameExists[0].$viewValue">
<label class="control-label" style="color:red">A store with that name already exists. Please select another name.</label>
</div>
<div class="form-group">
<input type="text" class="form-control" ng-model="user.merchant_mobile_phone" placeholder="Phone" >
</div>
</div>
<div class="checkbox clip-check check-primary">
<input type="checkbox" id="agree" ng-model="signupForm.agree" value="agree" ng-required="!signupForm.agree">
<label for="agree">I agree</label>
</div>
<div class="checkbox clip-check check-primary" ng-show="signupForm.agree">
<input type="checkbox" id="merchant" ng-model="signupForm.merchant" value="merchant" >
<label for="merchant">Sign up as merchant</label>
</div>
Is there a way this can be done within the view template rather than passing it to controller. Or should I write a directive for this?
Thanks!!
You don't have to write a single line in your controller to achieve your task with the following two DOM settings.
<input type="text" ng-model="myText">
<input type='checkbox' ng-model='chkMonitor' ng-click='!chkMonitor && (myText = "")' >
Explanation:
Your inputs are bound to the scope through scope variables. Now you place your code in ng-click of the check box to execute the clearing code. This has to be done only when the check box is unchecked. So, first check for this in a boolean expression before executing your clearing code :
ng-click='!chkMonitor && (myText = "")'
Your myText = "" will never execute as long as the chkMonitor is false.
Goal
show email confirm when a user start editing the email section.
hide the email confirm text-box if the user doesn't touch it.
Don't do anything if the user only edit the username part.
Edit Form
username* __________________________
email* __________________________
email confirm* _____________________
HTML/BLADE
<div class="form-group">
<label class="col-sm-3 control-label required ">Username </label>
<div class="col-sm-9 form-group float-label-control ">
{{ Form::text('username', isset($user->username) ? $user->username : '' , array('id'=>'form-field-icon-2')); }}
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label required ">Email </label>
<div class="col-sm-9 form-group float-label-control ">
{{ Form::text('email', isset($user->email ) ? $user->email : '' , array('id'=>'form-field-icon-2')); }}
</div>
</div>
HTML
<label> Username </label><br>
<input type="text" name="username"><br>
<label> Email </label><br>
<input type="text" name="email" id="email"><br>
<label id="l-email-conf" > Email Confirm </label><br>
<input type="text" name="email_confirm" disabled="disabled" id="email-conf">
JS
$('#l-email-conf').hide();
$('#email-conf').hide();
$('#email').on('input', function (event) {
var text = $(this).val();
if (text === '') { // If email is empty
$('#email-conf').prop('disabled', true);
} else {
$('#email-conf').prop('disabled', false);
$('#email-conf').show();
$('#l-email-conf').show();
}
});
JSFiddle
Inline javascript could be an elegant solution if you don't want to write a function.
onkeyup and onkeydown events will do the job and you don't need jQuery
<form>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" onkeyup="this.parentNode.nextElementSibling.style.display = 'block';" onkeydown="this.parentNode.nextElementSibling.style.display = 'none';"/>
</p>
<p id="confirm-email">
<label for="confirm">Confirm email</label>
<input type="text" name="confirm" id="confirm"/>
</p>
</form>
CSS:
#confirm-email {
display: none;
}
Example: jsFiddle
Say this is your HTML -
<input type="text" name="username">
<input type="text" name="email" id="email">
<input type="text" name="email_confirm" disabled="disabled" id="email-conf">
<script>
// Use jQuery event handlers
$('#email').on('input', function (event) {
var text = $(this).val();
if (text === '') { // If email is empty
$('#email-conf').prop('disabled', true);
} else {
$('#email-conf').prop('disabled', false);
}
});
</script>
jsFiddle
P.S. - U can toggle hide/show instead of disabling also.