I'm using Angular 6.0.9 and Angular Material 6.5.4. In my form I have an ngFor loop for the inputs with an errorStateMatcher to validate the input.
The problem is that if the content of an input field is invalid, all other fields will also be marked as invalid (even if they are not dirty). I want to make sure that only the current field that is actually invalid is marked as red.
See a self-explanatory example on stackblitz:
https://stackblitz.com/edit/angular-s1jyhw?file=app%2Finput-error-state-matcher-example.html
Your inputs all share the same form control emailFormControl. You need a separate form control for each input. It is okay to use the same ErrorStateMatcher but not FormControl
Related
I want to make two sperate check box groupe. Lets say
Front end courses
-Bootstrap
-React Js
-Angular js
Back end courses
-C#
-Node
-PHP
on submitting form I want to make sure at least one course is selected by the user. Lets say a student selects ReactJs.
I have tried below code but it makes one option mandatory for all checkbox groups
[Checkbox* checkbox-11 ",Bootstrap" "React Js" "Angular JS"]
[Checkbox* checkbox-12 ",C#" "Node" "PHP"]
How can I make at least one option selected mandatory from any of the checkbox groups
field validation takes place post form submission. To solve this problem you need to make neither field mandatory, and then do a custom validation on the server side. CF7 plugin allows you to add custom validation to individual field but does not allow you to validate a field wrt to the value of other fields in the form.
To do this you need an extension such as the Smart Grid-layout plugin which has a validation hook that gives you access to the entire form's submitted data and therefore cross-validate your fields,
add_filter('cf7sg_validate_submission', 'cross_validate_submission',10,3);
function cross_validate_submission($validation, $submission, $form_key){
if(empty($submission['fe-courses']) && empty($submission['be-courses'])){
$validation['fe-courses']='You need to select at least 1 course!';
}
return $validation;
}
I was struggling with adding template driven form validation in my angular2 app.
i have a forked the plunker https://plnkr.co/edit/phhe74kAUmNZgNSmcsvm?p=preview
i failed to achieve the form validation for my custom component alone and other html components are working fine.
In the plunker, if you start typing name and street it will updated in both form and and my model object as well. but the when you start typing postcode it will update only in my model object and not with form.
I wanted the form to be invalid if i make postcode filed to empty.
Is i missed something here ?
Currently, your form doesn't recognize your child components' input field as a form field, you need to change your child tag a bit... to have the name attribute and ngModel to bind this child component to the form. Also include required here.
Lastly, you need to add ngDefaultControl to have two-way binding for the form field. So your child tag should look like this in your parent:
<my-input name="postcode" ngModel ngDefaultControl required [(value)]="user.address.postcode"></my-input>
Here is your forked
Plunker
I've tried all the HTL context parameters (even 'unsafe'). When I inspect the input, I can see the value intact, but you can't see the value pre-populated in the field. I tried different types of values, different contexts, and different types of input fields. [AEM 6.2]
<input type="email" name="senderEmail" value="${userProfile.email # context='text'}"/>
If the value is rendered in page source and also visible in browser inspector, could it be that it's hidden by some weird CSS? Something like color:transparent
There are many possible causes. I'll pitch in one, to help get you thinking. Is userProfile available via the use api?
I've made this mistake before:
<div data-sly-use.bean="com.beans.Bean">
${bean.value}
</div>
// ... other code
${bean.value}
The "Bean" isn't available later, outside it's host element.
If I understand your question correctly this isn't actually about HTL, but rather about the HTML input element itself. You have an input element with a value attribute set, yet that value is not displaying in the box. If that's correct, then I'd recommend doing some investigation around HTML input value not displaying when set, rather than sightly context issues.
Some possible answer would include css styles hiding the input text or javascript clearing out the values after page load. There are certainly more potential causes, but we'd need to know more about your page to provide a better answer.
To do some of your investigation you can try loading a component with only that input in it and see if that works, that would eliminate any css or js executing elsewhere on the page.
I want to create a validator for an angular2 form that involves several controls. So far, all I have found is how to create validators for controls inside a form, in an isolated way, like this:
this.myControl = new FormControl('',Validators.Required);
but I didn't find any example of a validator that involves the state of several controls at the same time.
To explain my case, here is a simple example.
In this example, what I want is:
IF the checkbox is selected, I want the two input boxes to be NOT REQUIRED.
IF the checbox is NOT selected, I want the two input boxes to be REQUIRED.
I could to this programmatically, but I wanted to know if there is an elegant solution that involves validators at a form level, not only at FormControl level.
I am building a multi-step application form with React. Having first built it with pure internal state I am now in the process of refactoring to Redux using redux-form.
Having used the example here as a basis: http://redux-form.com/5.2.5/#/examples/wizard?_k=oftw7a we have come a good way.
However the problem appears when i have two forms which are supposed to have the same value. During one of the pages i have a name field, that is supposed to be duplicated on the name field of the next page. The opposite should happen if you go back from the last page. Any tips to how this could be achieved?
Using the wizard, you are basically working with the exact same form that's split into multiple pieces. Ultimately it's the same form, because redux-form tracks them by name. It is how the library identifies the pieces of the same form - using the name.
form: 'wizard',
Here you can see that the exact same instance of the form will be shared throughout the pieces. fields work in a similar manner. Each field is defined as part of a form.
As long as you use the same field constants inside the fields object that you pass into the reduxForm function and as long as the value for form is the same, so that they use the same underlying form object, it should work for you just fine.
On one page you should pass in
export default reduxForm({
form: 'wizard',
fields : {
'fieldIWantOnBothPartsOfTheForm',
'someOtherFieldThatShouldOnlyBeHere',
},
...
And then on the other page:
export default reduxForm({
form: 'wizard',
fields : {
'fieldIWantOnBothPartsOfTheForm',
'thirdFieldHere',
},
...
Also, make sure you keep destroyOnUnmount equal to false if you want to navigate back-and-forth.
Hope that helps.