I need to create a form to register the partners of a company.
There is a checkbox, that when it is checked 1 field is enable and you can insert the information, for ex:
-> name of partner.
But if the user wants to register more the 1 partner, could be a button that create another field to insert other name.
How can I work with this name fields? When I used PHP, I put the field like this:
And I get the values = name[0] ... name[1] ...etc
In Angular 2, how can I do this?
you can create an array like
let fields: any = [{
checkbox: false,
textbox: ""
}];
use loop through the form elements using this array like this
<div *ngFor="let item of fields;">
<input type="checkbox" name="somename" [(ngModel)]="item.checkbox"/>
<input type="text" [disabled]="item.checkbox" name="somename" [(ngModel)]="item.textbox"/>
</div>
<button (click)="addField()">Add Another</button>
whenever user click on this button
addField(){
this.fields.push({
checkbox: false,
textbox: ""
});
}
thats it
Related
I have to develop a configuration screen where I have to fetch a set of key pair values from db and show in the UI to update the configuration. Here, when the value is 'TRUE' or 'FALSE', I have to show the input control as checkbox and for the rest of the values, I have to show the input control as textbox. I have used ng-repeat for single input control. But here I need to show two input controls (checkbox / textbox) based on the value. Can you please give me an idea on how to use ng-repeat to implement with multiple input controls ?
How about something like this:
<div ng-repeat="item in items"
ng-init="item.showCb = item.value == 'TRUE' || item.value == 'FALSE'">
<input type="checkbox"
ng-if="item.showCb" />
<input type="text"
ng-if="!item.showCb" />
</div>
JSFIDDLE
I would like to ask you how I can add a key
and a value to an object. I want to get values from textareas, which
are generated with the help of ng-repeat, and to push them to an object.
courses: {}
With postman it works fine
courses :{
"C#" : "C# 101",
"C++": "C++ Advanced"
}
I have a collection called courses. Then with ng-repeat I create a textarea for each course and from this form I would like to put a key and a value to the object courses. key: course_code, value: course_desc. The problem is that I do not know how to store in the in the DB.
<div class="form-group" ng-repeat="course in courses">
<label for="{{course.name}}">{{course.name}}: </label>
<textarea rows="3" ng-model="course.value" class="form-control"></textarea>
</div>
The form
i am trying to create a dynamic form in angular. if type is text, the input will be <input type="text">. If type is checkbox, it will display <input type="checkbox">
here is the data successfully requested from server that i put in controller $scope
.controller('FormCtrl', function($scope){
$scope.form_data = [
{"id":1,"question":"Name","type":"text","user_criteria":"faiz","answer":[]},
{"id":5,"question":"Hair Type","type":"checkbox","user_criteria":"Long","answer":[{"id_answer":10,"id_survey":5,"answer_txt":"Long"},{"id_answer":11,"id_survey":5,"answer_txt":"Short"}]}
];
$scope.updated_form = {};
});
this is the template
<div ng-repeat="fm in form_data">
<div ng-if="fm.type =='text'">
<label>{{fm.question}}</label>
<input type="text" ng-model="{{fm.user_criteria}}">
</div>
<div ng-if="fm.type =='checkbox'">
<div ng-repeat="ans in fm.answer">
<input type="checkbox"> {{ans.answer_txt}}
</div>
</div>
</div>
for the input type text value. it appears label print Name and the input value print faiz. the code are displayed successfully to the correct input type and value.
but i have 2 question.
is there a way in the checkbox to check the value of the user_criteria to check the checkbox input?
how to pass all this data into the $scope.updated_form so i can use the value from the input like this ?
$scope.updated_form = [
{"id":1, "user_criteria": "faiz new name"},
{"id":5, "user_criteria": "Short"}
];
i am stuck to pass the form data for processing since i am lost when it comes to nested loop in the checkbox
I made a small sample to resolve your issues:
http://jsbin.com/pahuwe/3/edit?html,js,output
I used a initial fill function, to transfer the data to updated_form field:
$scope.updated_form = [];
$scope.form_data.forEach(function(item) {
$scope.updated_form.push(item);
});
and I used input radio for select, but with model and value parameters:
<input type="radio" ng-model="fm.user_criteria" ng-value="ans.id_answer"/>
Use a same ng-model to permit select a unique response.
My understanding is, you want to know what user checked and inputted , you can use another model to store the user data.(You need to init the updated_form with ids) And for the checkbox, you need to add a function with ng-change to set the checked answer into related data. It will be like
<div ng-repeat="fm in form_data">
<div ng-if="fm.type =='text'">
<label>{{fm.question}}</label>
<input type="text" ng-model="{{updated_form[fm.id].user_criteria}}">
</div>
<div ng-if="fm.type =='checkbox'">
<div ng-repeat="ans in fm.answer">
<input type="checkbox" ng-model="theChecked" ng-change=" if (theChecked) updated_form[fm.id].user_criteria = ans.answer_txt; "> {{ans.answer_txt}}
</div>
</div>
We have a dynamic Form being rendered based on database configurations. I am using code as mentioned in the below fiddle
But am not able to get the value of the checkbox element selected. Please guide me through this.
I am using checklist-model for Checkbox Elements.
<label ng-repeat="cCheck in form.color">
<input type="checkbox" checklist-model="outputs[form.databaseAttr]" checklist- value="cCheck" ng-init="outputs[form.databaseAttr] = form.defaultValue"> {{cCheck}} <br>
</label>
Fiddle Link
Please let me know if we have anybetter way of handling Dynamic Forms. Something like jQuery Serialize where we pass the formId and get all elements from the form.
There is a checklist-directive developed to solve the checkbox problem. You can download check-list.js and add it as the module dependency as following:
var exampleApp = angular.module('example', ["checklist-model"]);
So, in your html, you should use checklist-model and checklist-value instead of ng-model and ng-value respectively:
<div ng-switch-when="checkbox">
<br>{{form.text}} <br>
<label ng-repeat="cCheck in form.color">
<input type="checkbox" checklist-model="outputs[form.databaseAttr]" checklist-value="cCheck" ng-init="outputs[form.databaseAttr] = form.defaultValue"> {{cCheck}} <br>
</label>
</div>
Try it yourself.
EDIT: In order to set default values of the checkbox, you can put the values that you want into the outputs[from.databaseAttr] array. In your case, defaultValue:
{
text: 'select mutiple colors',
databaseAttr: 'checkbox',
type: 'checkbox',
color: ['red', 'blue', 'black'],
defaultValue: ['blue'] // <-- blue is set as default
}
JsFiddle.
I am new to Angular and i just cant wrap my head around that problem.
I have several checkboxes which will have a unique value each, like so:
<label ng-repeat="c in classes">
<input type="checkbox" ng-model="query" ng-true-value='{{c.name}}'>
<span>{{c.name}}</span>
</label>
Next i have this set of divs that should be filtered on a specific value like card.name , like so:
<div ng-repeat="card in cards | filter:query">
<h2>{{card.name}}</h2>
<p><em>{{card.text}}</em></p>
</div>
When checkbox with value 'Peter' is checked, all cards with card.name=Peter are shown. When checkbox 'Peter' and 'John' are shown all cards with card.name=Peter and =John are shown. How can i realize this?
I guess its more of a general concept/markup question...
You don't need to have two different variables, in fact that is the problem. Angular doesn't know how to tie them together.
The filter can look deep into the object for a specific key set to a specific value. In my example the filter looks for this particular selected attribute, only showing ones that are set to true Keeping everything in the same object keeps everything tied together.
<label ng-repeat="c in classes">
<input type="checkbox" ng-model="c.selected" />
<span>{{c.name}}</span>
</label>
<div ng-repeat="card in classes | filter:{selected:true}">
<h2>{{card.name}}</h2>
<p><em>{{card.text}}</em></p>
</div>
Here is the data:
$scope.classes = [{
name: "John",
text: "Something about John"
},{
name: "Peter",
text: "Something about Peter"
}];
Note: that a selected attribute is added to each object when it is selected. This is the key we are filtering on.
Working example: http://jsfiddle.net/TheSharpieOne/y2UW7/
UPDATE:
After re-reading the question, it appeared to me that there would be multiple cards for the same name. A different approach would be needed.
In this case, multiple variables are needed, a list of checkboxes and a list of "cards". We also need a var to track which boxes are selected.
In this case we use a function to filter the list as 1 checkbox could change many "cards"
Example: http://jsfiddle.net/TheSharpieOne/y2UW7/1/