Setting Angular variable to html "name"

Question

So I have a object that is passed back.The object is a bunch of survey questions, with option to enter response. This object has a variable called "Mandatory" meaning that this questions is mandatory.

So we can display the questions and also pass back answers ("o.Answertext"). But I am struggling to set up the mandatory field validation.

<div ng-if="o.QuestionType == 'Text'">
    <textarea class="form-control" ng-model="o.AnswerText"
            name="{{o.SurveyQuestionId}}" rows="5" id="comment"></textarea>
    <br />
    <div ng-if="o.Mandatory == true">
        <span style="color:red" ng-if="form.$submitted || form.o.SurveyQuestionId.$touched"
                ng-show="form.o.SurveyQuestionId.$error.required">
            Required
        </span>
    </div>
</div>

I can see that ng-if="o.Mandatory == true becomes activated. But my span ng-if never becomes activated.

You'll need to use square bracket notation due to the dynamic element name, ie form[o.SurveyQuestionId].$touched, form[o.SurveyQuestionId].$error.required, etc — Phil
– Phil, Commented Feb 22, 2016 at 0:55
The issue is making the ng-if in the span active. I need that to confirm validation. — test
– test, Commented Feb 22, 2016 at 0:56

Louie Almeda · Accepted Answer · 2016-02-22 01:13:35Z

2

DEMO Use ng-required in your <textarea>

<form name='mainForm'>
 <div ng-if="o.QuestionType == 'Text'">
    <textarea class="form-control" ng-required='o.Mandatory'
           name='{{o.SurveyQuestionId}}' ng-model="o.AnswerText" rows="5" id="comment"></textarea>
    <br />
    <div style='color: red' ng-if="mainForm[o.SurveyQuestionId].$touched &&  mainForm[o.SurveyQuestionId].$error.required">
            Required
        </span>
    </div>
  </div>
</form>

here's the docs

edited Feb 22, 2016 at 1:13

answered Feb 22, 2016 at 0:57

Louie Almeda

5,66035 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Phil Over a year ago

See my comment above about the form element name. It's not literally SurveyQuestionId

Louie Almeda Over a year ago

@Phil I edited my answer, I think it's correct now :)

test Over a year ago

got this working by instead of adding required='' instead of 'ng-required' thanks so much for your help!

Louie Almeda Over a year ago

@test, no problem. Hmmm, Based on what you've done with required='' have you tried setting o.Mandatory = false and still got the correct result?

Collectives™ on Stack Overflow

Setting Angular variable to html "name"

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related