-1

I have only 1 input in my form which is why the reduce method doesn't work but how to validate the form without this method.Already a lot of things tried but the result is not achieved...... My JS controller

var valid = component.find('CommentForm').reduce(function (validSoFar, inputCmp) {
            // Displays error messages for invalid fields
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && inputCmp.get('v.validity').valid;
        }, true);

my component

<aura:component description="CommentForm">
    <aura:attribute name="NewComment" type="Comment__c" default="{ 'sobjectType': 'Comment__c','Name':'',
                        'Comment__c': '','Dish__c':''}"/>
    <aura:registerEvent name="addComment" type="c:AddCommentEvent"/>
    <form class="slds-form--stacked">
        <lightning:textarea aura:id="CommentForm"  label="Comment"
                            name="CommentForm"
                            value="{!v.NewComment.Comment__c}"
                            required="true" maxlength="2000" messageWhenValueMissing="Complete this field" messageWhenTooLong="maxlength 2000 characters"/>
        <lightning:button label="Create Comment"
                          class="slds-m-top--medium"
                          variant="brand"
                          onclick="{!c.clickCreateComment}"/>
    </form>
</aura:component>
  • Hello sirs .Please tell me why validation does not work in my code.I read a lot of things but I would like to do it this way.I will be grateful – user57048 May 31 '18 at 16:48
  • 3
    Please edit your post to be more specific than "does not work". What behavior do you expect? What behavior do you observe? What are you trying to achieve at a high level? – Adrian Larson May 31 '18 at 16:53
  • Action failed: c:CommentForm$controller$clickCreateComment [component.find(...).reduce is not a function] – user57048 May 31 '18 at 17:02
  • 2
    Not in the comments. Once again, please edit your post with these clarifications. What are you expecting the validation to do? – Adrian Larson May 31 '18 at 17:03
  • 2
    Once again, please edit your post to include any clarifications to your question. That's not what comments are for. – Adrian Larson May 31 '18 at 17:06
3

Very painfully, component.find has 3 possible return values:

  • undefined
  • single component
  • component array

Always returning an array of 0, 1 or more entries would be more helpful and the addition of a findAll method for that to the framework would be great.

In your case you only have one matching component so you are getting a single component returned not an array and the reduce method is only available on arrays.

Something like this will handle both cases (if you expect to add more fields):

[].concat(component.find('CommentForm')).reduce(...);

because [] is an array and concat concatenates either a single value or an array to the array. Note though that null is not mapped to an empty array though.

| improve this answer | |
  • 1
    This is why my helpers usually have a method like this: findList: function(component, name) { var results = component.find(name) || []; return results.length >= 0? results: [results]; } – sfdcfox May 31 '18 at 17:18
  • 3
    ...And I like your method better. I'm going to steal it now. – sfdcfox May 31 '18 at 17:19
  • 1
    @sfdcfox We all learnt a long time ago not to pass nulls instead of empty arrays in other situation/languages. Think this multiple return types is a very bad design decision in the framework that I expect trips up just about everybody at some point. – Keith C May 31 '18 at 17:20
  • 1
    Yeah, I would have expected component.find to behave more like jQuery's $() selector method; it always returns an array, even if the array may be empty. And most of Apex Code works that way, too. It's just odd that they felt it should return one of three different outcomes. – sfdcfox May 31 '18 at 17:23
  • 1
    @sfdcfox Given it's too late now to change the behaviour of find, I'd +1 the addition of a findAll that always returned an array. – Keith C May 31 '18 at 17:26
1

If you only have one element, you only need to check that one element:

var commentForm = component.find('CommentForm'), valid;
commentForm.showHelpMessageIfInvalid();
valid = commentForm.get("v.validity").valid;
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.