We Keep Coding

What's the meaning of [class.notvalid] in code

Iam a pretty new in Angular , please help with the following code in Angular.
We have a special window which checks the customer data. You put special bill number and then POPup will show and you must enter the card number. But when we put incorrect card number to the input field (which he cant find in backend), the POPup dissepares and it shouldn't work this way. The POPup window should stay and you can put another card number for checking the card. I guess the problem is with validation may be Im not sure but I guess the valdiation is related to [class.notvalid]
But I dont know the meaning of the code [class.notvalid]. Please explain if you can the meaning of the [class.notvalid]
I have a Angular CLI: 8.3.5 versioun . It was hard to me to try to correct the code as I cant understand some modules in Angular
transfer.html
<p class="input-label" [translate]="'page.transfers.RECIPIENT_IIN_BIN'" [class.notvalid]="iin && !finn?.valid">IIN/BIN of customer</p>
<div class="input-w"
[class.input-w-error]="recipient !== undefined && !recipient.success">
<input type="tel" maxlength="12" class="input"
#finn="ngModel"
[(ngModel)]="iin"
(keyup)="searchRecipientOtherBank(iin, iban)"
[class.notvalid]="iin && !finn?.valid"
pattern="^[0-9]{0,12}$"
require/>
</div>
</div>
I expect that when you put the card number the POPup will not dissaper and you can try to put another number

[class.input-w-error] and [class.notvalid] are angular directives to access css classes in the format -("class.css-class-name").
The class is used when the condition assigned evaluates true.
In the code above-
[class.notvalid]="iin && !finn?.valid"
.notvalid class is added to the classes if iin && !finn?.valid evaluates true.

clearvalidators not working in angular 6 form control

I have two form group names like below. Sometimes one form is not shown to user. When both are shown I have no issues. And I have a button which is visible when the form is valid.
<div
*ngIf="showPersonalInfo"
class="personalInfo"
formGroupName="personalInfo"
>
<div
*ngIf="showFamilyInfo"
class="familyInfo"
formGroupName="familyInfo"
>
<button
*ngIf="InfoForm.valid"
class="submitButton"
</button>
And I initialize my form using below code.
this.InfoForm = this.formBuilder.group({
personalInfo: this.getPersonalInfo(),
familyInfo: this.getFamilyInfo(),
});
The code in this.getFamilyInfo() will set showFamilyInfo to true or false and it initializes the form in both the cases otherwise my html throws familyInfo is not found.
One of our service sometimes looks for the member profile and pulls existing family info/personal info and fills the model and sets showPersonalInfo/showFamilyInfo to true.
when showFamilyInfo is false my InfoForm.FamilyInfo form control is showing as invalid. To avoid this error i am clearring validators using below code but it still shows the familyInfo form control status invalid. My PersonalInfo is valid though.
How can ignore everything related to FmilyInfo when showFamilyInfo is false so the button will be visible.
this.InfoForm.get('familyInfo').clearValidators();
this.InfoForm.get('familyInfo').updateValueAndValidity();

I think you need to clear the errors before you can update the Validity. In the linked post, the answer by Julia P. covers how to clear the errors. Then you run updateValueandValidity. How can I manually set an Angular form field as invalid?

I had the same issue, in my case, the code setErrors(null) solved the problem.
Try to do this:
this.InfoForm.get('familyInfo').clearValidators();
this.InfoForm.get('familyInfo').setErrors(null);
this.InfoForm.get('familyInfo').updateValueAndValidity();

Angular, required check on controller throughout multiple forms

I am trying to find a simple solution to a required input type of scenario. I have multiple small forms that all send on one button save on the bottom of the page. What I am trying to accomplish is something like ngRequired, however across the whole controller, not just the individual forms. So the desired effect is pretty simple - if any of the inputs aren't filled out - set a boolean( or something) to false that disables the save button at the bottom.
So my first attempt is like this -
I have a model on each of the required items - there are 10 items
then I have a function that checks when you try to click the button how many are chcked like this
if($scope.modeltracker1){
//if there is anything inside model 1 add 1 to the tracker
$scope.modeltracker += 1;
}
and if the counter is not 10, don't do anything (all required are not filled out)
if($scope.modeltracker != 10){
//do nothing because all required are not filed out
}else{
//run save, all required all filed out
}
So - I feel like there should be a much easier solution than my first attempt here. Maybe something along the lines of checking if any individual one of these required fields is false, don't fire? I know that ngRequied would be great for this, but unfortunately the way this has to be structured, it cannot be one large form. There has to be a much easier way to accomplish this task with angular.
Any input would be much appreciated, thanks for reading!!

You can use ng-form to nest your multiple forms. It allows using nested forms and validating multiple forms as one form.
So, you need to nest your multiple forms in one root form.
<div ng-controller="demoController">
<form name="parentForm">
<ng-form name="firstForm">
<input type="text" ng-model="firstModel" required>
</ng-form>
<ng-form name="secondForm">
<input type="text" ng-model="secondModel" required>
</ng-form>
</form>
</div>
Then, all you need to do is to check parent form's validation status.
angular.module('formDemo', [])
.controller('demoController', ['$scope', function($scope) {
if($scope.parentForm.$valid) {
//run save, all required all filed out
} else {
//do nothing because all required are not filed out
}
}]);

you can use myForm.$invalid directive, as explained here: Disable submit button when form invalid with AngularJS

Rails javascript; alert to fire when leaving a field

My ultimate goal is to add some validation to a set of date fields. However, my javascript sucks, so I'm starting small.
I am starting out by trying to get an alert message when a user leaves a field.
(For simplicity I'm just doing it all in my view...) Heres what I go to work...
# html.erb-template
<div class="from_date">
From Date
<input type="text" id="from_date" name="from_date"></input>
</div>
<script>
$("#from_date").blur( function() {
alert("boom!");
});
</script>

Your code seems to be fine - problem is that class and id are named the same, but you want to watch the input field not the surrounding div.
I just made a fiddle from your script and changed
the listener to be attached to the input field's id - and it's working.
the alert into a console.log
see
$("#from_date").blur(function() {.....
// instead of
$(".from_date").blur(function() {.....

Show Input Box on Check

You can see in the paper form attached what I need to convert into a web form. I want it to show the check boxes and disable the input fields unless the user checks the box next to it. I've seen ways of doing this with one or two elements, but I want to do it with about 20-30 check/input pairs, and don't want to repeat the same code that many times. I'm just not experienced enough to figure this out on my own. Anyone know anywhere that explains how to do this? Thanks!
P.S. Eventually this data is all going to be sent through an email with PHP.

I don't think this is a good idea at all.
Think of the users. First they have to click to enter a value. So they always need to change their hand from mouse to keyboard. This is not very usable.
Why not just give the text-fields? When sending with email you could just leave out the empty values.

in your HTML :
//this will be the structure of each checkbox and input element.
<input type="checkbox" value="Public Relations" name="skills" /><input type="text" class="hidden"/> Public Relations <br/>
in your CSS:
.hidden{
display:none;
}
.shown{
display:block;
}
in your jQuery:
$('input[type=checkbox]').on('click', function () {
// our variable is defined as, "this.checked" - our value to test, first param "shown" returns if true, second param "hidden" returns if false
var inputDisplay = this.checked ? 'shown' : 'hidden';
//from here, we just need to find our next input in the DOM.
// it will always be the next element based on our HTML structure
//change the 'display' by using our inputDisplay variable as defined above
$(this).next('input').attr('class', inputDisplay );
});
Have fun.

Since your stated goal is to reduce typing repetitive code, the real answer to this thread is to get an IDE and the zen-coding plug in:
http://coding.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/
http://vimeo.com/7405114