typescript - angular2 ngForm validation for dynamic generated elements -
i have list of form elements generated base on api json. trying add validation them , i'm using angular2 ngform. textboxes, dropdown(select) validation working perfect "on keypress" or "on select" error message removed radio button , checkbox validation not working in error message remove after whole form valid.
my radio button element json like:
{ "id": 8, "question": "marital status", "description": "", "answer_element": "radio", "is_required": true, "answers": [ { "id": 41, "answer": "married", "is_image": false, "image_url": "/assets/images/original/noimage.png" }, { "id": 42, "answer": "divorced", "is_image": false, "image_url": "/assets/images/original/noimage.png" }, { "id": 43, "answer": "single", "is_image": false, "image_url": "/assets/images/original/noimage.png" } ], "questionaries": [] }
and checkbox button element json like:
{ "id": 33, "question": "would wear these colors?", "description": "", "answer_element": "checkboxes", "is_required": true, "answers": [ { "id": 178, "answer": "red", "is_image": true, "image_url": "/178/original/red.png?1501830794" }, { "id": 179, "answer": "yellow", "is_image": true, "image_url": "/179/original/tan.png?1501830794" }, { "id": 176, "answer": "black", "is_image": true, "image_url": "/176/original/black_color.png?1501830212" }, { "id": 177, "answer": "brown", "is_image": true, "image_url": "/177/original/brown.png?1501830213" }, { "id": 181, "answer": "grey", "is_image": true, "image_url": "/181/original/grey.png?1501830794" }, { "id": 182, "answer": "salmon", "is_image": true, "image_url": "/182/original/salmon.png?1501830794" }, { "id": 183, "answer": "tan", "is_image": true, "image_url": "/183/original/yellow.png?1501830794" }, { "id": 184, "answer": "white", "is_image": true, "image_url": "/184/original/white.png?1501830794" }, { "id": 185, "answer": "pale blue", "is_image": true, "image_url": "/185/original/paleblue.png?1501830794" }, { "id": 186, "answer": "navy blue", "is_image": true, "image_url": "/186/original/navybule.png?1501830794" } ], "questionaries": [] }
my angular2 ngform code radio button following:
<div *ngif="question.answer_element === 'radio'"> <div class="form-group"> <label>{{question.question}}</label> <div class="radio"> <label *ngfor="let answer of question.answers;"> <input type="radio" name="f{{i}}" [(ngmodel)]="question.questionaries.length > 0 ? question.questionaries[0].answers[0] : question.answers[0][0]" required #f="ngmodel" value="{{answer.id}}" (change)="changeanswer(question.id,[answer.id],true)" ><span class="icn"></span> {{answer.answer}} </label> </div> <small *ngif="questionform.submitted && !questionform.valid" class="text-danger"> field required </small> </div> </div>
my angular2 ngform code checkbox code following:
<div *ngif="question.answer_element === 'checkboxes' && question.answers[0].is_image === true"> <div class="form-group"> <label>{{question.question}}</label> <div class="checkbox brand"> <div class="brand-block" *ngfor="let answer of question.answers; let j = index;"> <label> <input type="checkbox" name="question[{{question.id}}]" id="question_{{answer.id}}" required [checked]="question.questionaries.length > 0 ? question.questionaries[0].answers.includes(answer.id.tostring()) : false" value="{{answer.id}}" (change)="changecheckboxanswer(question.id,answer.id,$event.target.checked)" ><span class="icn"></span> <div class="brand-img"><img src="{{answer.image_url}}" alt="{{answer.answer}}" /></div> <p class="brand-name">{{answer.answer}}</p> </label> </div> </div> <small *ngif="questionform.submitted && !questionform.valid" class="text-danger"> field required </small> </div> </div>
Comments
Post a Comment