We Keep Coding

How to know if an Angular (v5) Reactive-Form is submitted from a form field which itself is a custom component?

We have an Angular 4 app, where we have a template driven form, which consists of multiple custom components (i.e. our custom-input tag). Within those custom components we need to know if the form is already submitted or not. So we can show some error text, within the component. So this logic from our custom component has been working until now with Angular 4 and Template Driven Forms:
const classes = this.elementRef.nativeElement.className;
And classes have for instance ng-dirty, ng-touched, ng-invalid and submitted (when the form is submitted). So angular was adding the class 'submitted' automatically for every form field, when the form is submitted.
Now We try to build another Angular app, with Version 5, with reactive forms. We have the same concept, but from the components (actually from the html - since we use nativeElement) we somehow do not get any clue about the submit. We can of course give in the information from the form to custom elements, but we dont want to write the same on every form component. Imagine the form has 50 fields..
Is there any other option?

There is no such property which can tell you the form is submitted or not, you need to create a variable and keep status of your form like
isSubmitted: boolean = false;
On save method
save(...){
this.isSubmitted = true;
...............
}
See the below link for more detail
angular 5 form validation easiest way

onBlur on editable-form (Angularjs)

Is there a directive onblur for editable-form? I can't seem to find one. angular has this ngTouch but it only validates a single input. What I really want is to know if the user loses focus on the form itself.
my code is something like this [editable-form][1]
but when the user clicks on the different form the editable form will trigger the editableForm.$cancel() method.
http://jsfiddle.net/NfPcH/81/

I've got the solution, you only need to add the tag blur='cancel' on <form editable-form name="editableForm" onaftersave="saveUser()" blur="cancel">

Hidden input fields causing modal form to be invalid

I have an angular js application in which I have a modal form to capture payment details. I am validating the input fields using angular required attribute as below.
<input name="cardNumInput" required type="text" size="20" class="form-control" ng-model="userInput.paymentParams.CardNumber" ng-minlength="13" ng-maxlength="19"/>
Certain fields are visible based on user selections. The requirement I have is that only the visible fields be validated with the required attribute. But it looks like even the hidden inputs are being validated. My submit button is enabled only if the whole form is valid. How do I tell angular to not validate the hidden fields.
http://plnkr.co/edit/8REV5ai52QylxuBbYCrn?p=preview
I also have the problem of not able to indicate the user that my dropdowns are also mandatory - by showing the red border like on input fields.

It doesn't matter for a validation if an input is visible or not. So try use ngIf in stead of ngShow
upd
for the select highlighting you can use the same approach as with inputs (set the class with ngClass directive), but Bootstrap has no error styles for the select element, so you should define your own (or you can just extend it you you are using less)
for example
select.has-error{ border: 1px solid #a94442;}
http://plnkr.co/edit/FMLxDKBkPkuHmtEvzMrL?p=preview

How to change Angularjs xeditable text/textarea behavior?

I use angularjs and xeditable in my application. I would like to change the behaviour of editable textarea and editable text to allow the validation when the user click outside.
It will be better with an example :
<span editable-textarea="item.label.text" e-rows="2" e-cols="80" buttons="no" onshow="onShow()" onhide="onClose()">{{item.label.text}}</span>
With this code, we can't see the buttons to validate and to cancel our choice. Moroever the enter key doesn't validate, so it's impossible for the user to validate his choice.
What I want to do is changing the behaviour of the enter key to validate the new text. And I want to add the possibility for the user to change text and when he click outsite the textarea, the new text will be save.
The problem is I have no idea of how to do that even after reading all the documentation of xeditable and I didn't find the solution on any forum.
Do you have an idea of how can I do that ?
Thank you in advance

You can add the blur attribute with submit value and couple it with onbeforesave attribute:
<span editable-textarea="item.label.text" e-rows="2" e-cols="80" buttons="no" onshow="onShow()" onhide="onClose()" blur="submit" onbeforesave="validate($data)">{{item.label.text}}</span>
Example Fiddle: http://jsfiddle.net/NfPcH/8269/

Angular Form Validation Using Ng-Required

FIDDLE HERE: http://jsfiddle.net/TegFf/48/
I have a form with radio buttons (please Fiddle below) that should validate if:
you choose a radio button that has a dollar amount associated
you choose custom AND enter a value
My problem, I think, is that the Ng-Required I have put on an input field is not properly registering whether it is or is not required.
<input name="donation" type="radio" value="yes" ng-model="manual" required="false">
<input type="number" ng-model="donation" ng-required="manual === 'yes'">

http://jsfiddle.net/TegFf/49/
Couple of things:
First radio input has a different name.
Wrapping the manual amount inside a label together with the radio button prevents you from focusing the field.
An AngularJS form is not valid until all fields are valid, so it's easier if you add more debug code to see which field is actually invalid.

Your first radio button needs to have 'name="donation"' added to it. Another issue is that once variable manual is set to 'yes', it will always stay yes. You should either reduce the number of your variables, or set up a custom validation in a directive.