We Keep Coding

ViewModel like validation in AngularJs

I'm having some difficulty envisioning a potential solution to a dilemma I'm facing, and I need some creative inspiration.
Essentially, I'm struggling to picture a good way to validate a form that can be thoughts of as having multiple nested forms. The challenge is that these nested forms are only rendered when a line item in the main form is clicked, causing a modal to open, at which time the rendering, model binding, etc. takes place, and the nested form can be validated.
The goal is to know whether or not there are validation errors down inside any of the main form's line items without having to open/render a modal for the item to find out. I'd also like to make sure that there's no duplication of validation logic, and that things are drawing from a single common set of validations rules that can be shared/accessed everywhere needed.
Ideally, I'd like to abstract out the validation logic such that it can be used by any ng-model bound element, but can also be used independent of rendering a form.
If anyone knows of any plug-ins that work well with AngularJs and sound well suited, please let me know.
Clarification
Though I'm open to checking out any plug-ins that might help, that's not really what I'm after. My main objective to is to find a way to validate my nested item data without opening/rendering the item's modal.

I would use something that ensures that the user fills in these forms in a predefined format in the first place.
I use something called inputmask in my angularJs applications.
You can use a regex to define the format you want the inputs to be in.
You can also make sure that all the fields in the modal are in the right format before letting the user close the modal(This validation logic can come from a shared or common component).
Another option would be to make the modals hidden and not removed from the DOM so that the bindings remain even when the modal is no longer visible. You can add a red asterisk or something against the line which opens the modal to indicate errors in that modal's form.

Stop Puppeteer deleting text instantly

I am trying to have my Pupeteer autofill information on a PayPal page, but when I try typing it will instantly delete my info, here is a clip showing what happens: https://gyazo.com/205c07d98126ec31fe5c06551164d8d1
Here is my code:
await page.waitForSelector('input[id="cc"]');
page.type('#cc', '1234123412341234');
Not sure what is going wrong, I have tried changing the elements 'value' attribute, but when submitting the form it does not recognize the information.
Not sure what else to do! :(

Two things that come to my mind to check:
check if you have the same problem with other input fields out of Paypal. It could be important to isolate the problem and make a more precise research
check if the problem is related only to Puppeteer or is shared with other UI testing frameworks (like Cypress, TestCafè, Selenium). It's important to understand if it's Paypal that is doing something to block every browser automation tool (I would do it if I were in their place) or if they have a bug (it seems a mistake issue with React/Vue controlled input fields) that has something related to the automation.

Deal with input errors

I'm new to react native.
I need to create the front-end part of an app used to manage products. In this app, a specific screen lets users add a "new product".
I've almost finished the UI part, but I now need to show errors to the user when something is wrong with its input (a missing product ID, a description with less than 10 characters, etc.).
Here's my objective: when the user clics the "publish" button, I check all the inputs. If the input is ok -> nothing happens, if the input contains an error -> the field turns red.
To achieve this, I need to work with states. Here should be an example for the title:
style={[style.inputText, {color: this.state.titleColor}]}
And I can change the state.TitleColor if something is wrong with the title input.
The problem is that I don't want to create a specific state for each input (titleColor, IDColor, descriptionColor, etc.).
How can I do a common state for inputs that are correct, and an other state for inputs that are wrong? I thought of using an array (with inputCorrect:[] ;
InputWrong:[]), but I do not know exactly how to deal with it.
Can someone help me? Thanks.

I'd recommend using a form library to help you with state and validation. I personally like formik, but I've heard good things about react-final-form as well (both are compatible with React Native).
Libraries like this make it easier to manage validation and input state, because they manage the state for you and tell each of your fields whether they're valid or not (passing appropriate error messages if needed).
It's still up to you to build the UI that displays the errors, but having the logic taken care of is a huge help. The formik docs have some good examples showing you how you would achieve your goal of changing a field color to red if that field has errors.
There is a bit of a learning curve to understand how to use these libraries well, but it's well worth it in my opinion.

Angular2: What type of validation should be done through custom validators?

I am working on a projected with typescript and Angular 2 and don't know how to continue on my application. I currently have a page with several radio buttons and have applied model-based forms to my page, and have successfully made all radio buttons mandatory with the <any>Validators.required functionality. I am able to display an error message if any set of radio buttons have no been selected yet
The next thing I need to do is to check that the correct radio buttons have been 'checked' throughout the page. Is this something I should do through validation? Solving this problem could be done in the "onSubmit" function that I call, but I would rather be able to display error messages on the fly, when they user is marking off the radio buttons to let them know they chose poorly.
Any help on this topic is greatly appreciated. I don't see any reason to upload any code snippets, but if you think you need it I can very quickly get something up.

g.nodeName is undefined

I'm converting a login/registration page to using Ajax/jQuery. As such, there is alot of common validation functionality between the two forms. One area that I'm using jQuery for is to output error messages to the user based on the input. While the forms share similar element IDs, class names differ.
So for checking the username, I have
if ($(":input").is('.registerName')){
//Username belongs to the registration form, so check if current entry is
//valid and not taken. Output error message otherwise
} else {
//username belongs to the login form, so check if current entry exists in database
//output username/password error depending on catch
}
I've experienced some strange happenings.
First, the above code returns a g.nodeName is undefined error. If I change the initial conditional to
if ($("input#username").is('.registerName'))
the same error shows up in Firebug.
However,
if ($("#username").is('.registerName'))
and
if ($("#username").hasClass('registerName))
both fail and the login validation section executes.
So how can I get the right code block to execute based on class name without a g.nodeName undefined error?
EDIT
To clarify- there are NOT two forms on the same page. The code functionality is in the javascript. I'm referring to two separate HTML forms on differing pages that call the same JS function and the only difference is the text in the error messages output.
EDIT 2
JFiddle example: Here
The text box onclear doesn't work for the fiddle, but I think you can get the gist of what I'm trying to do.

I can't reproduce the exact issue you got, but try
if ($(this).is('.registerName'))
instead. That way you'll know it's only looking at the particular element on which the keyup event occurred. $(':input') will look for all inputs on the page.