cahephp formhelper template for generate chekbox - cakephp

I am using cakephp formhelper and I want to generate checkbox
I want cakephp to generate checkbox like this
<div class="form-group form-md-line-input">
<label class="col-md-2 control-label"
for="form_control_1">checkbox_title</label>
<div class="col-md-10">
<div class="md-checkbox-inline">
<div class="md-checkbox">
<input id="***this_part_should_be_match"
class="md-check"
type="checkbox">
<label for="***this_part_should_be_match">
<span></span>
<span class="check"></span>
<span class="box"></span>
</label>
</div>
</div>
</div>
</div>
This formhelper config
[
'button' => '<button{{attrs}}>{{text}}</button>' ,
'checkbox' => '<input type="checkbox" name="{{name}}" value="{{value}}"{{attrs}}>' ,
'checkboxFormGroup' => '<label class="col-lg-2 control-label">{{label}}</label><div class="col-md-10"> <div class="md-checkbox-list"><div class="md-checkbox"><input id="{{id}}" class="md-check" type="checkbox">
<label for="{{id}}">
<span></span>
<span class="check"></span>
<span class="box"></span></label></div></div></div>' ,
'checkboxWrapper' => '<div class="">{{label}}</div>' ,
'dateWidget' => '{{year}}{{month}}{{day}}{{hour}}{{minute}}{{second}}{{meridian}}' ,
'error' => '<div class="error-message">{{content}}</div>' ,
'errorList' => '<ul>{{content}}</ul>' ,
'errorItem' => '<li>{{text}}</li>' ,
'file' => '<input type="file" name="{{name}}"{{attrs}}>' ,
'fieldset' => '<fieldset{{attrs}}>{{content}}</fieldset>' ,
'formStart' => '<form class="form-horizontal" {{attrs}}><div class="form-body">' ,
'formEnd' => '</div> </form>' ,
'formGroup' => '{{label}}<div class="col-md-10">{{input}}<div class="form-control-focus"> </div></div>' ,
'hiddenBlock' => '<div style="display:none;">{{content}}</div>' ,
'input' => '<input class="form-control" type="{{type}}" name="{{name}}"{{attrs}}/>' ,
'inputSubmit' => '<input type="{{type}}"{{attrs}}/>' ,
'inputContainer' => '<div class="form-group form-md-line-input">{{content}}</div>' ,
// 'inputContainer' => '<div class="input {{type}}{{required}}">{{content}}</div>' ,
'inputContainerError' => '<div class="input {{type}}{{required}} error">{{content}}{{error}}</div>' ,
'label' => '<label class="col-md-2 control-label" {{attrs}}>{{text}}</label>' ,
'nestingLabel' => '{{hidden}}<label{{attrs}}>{{input}}{{text}}</label>' ,
'legend' => '<legend>{{text}}</legend>' ,
'multicheckboxTitle' => '<legend>{{text}}</legend>' ,
'multicheckboxWrapper' => '<fieldset{{attrs}}>{{content}}</fieldset>' ,
'option' => '<option value="{{value}}"{{attrs}}>{{text}}</option>' ,
'optgroup' => '<optgroup label="{{label}}"{{attrs}}>{{content}}</optgroup>' ,
'select' => '<select class="form-control" name="{{name}}"{{attrs}}>{{content}}</select>' ,
'selectMultiple' => '<select name="{{name}}[]" multiple="multiple"{{attrs}}>{{content}}</select>' ,
'radio' => '<input type="radio" name="{{name}}" value="{{value}}"{{attrs}}>' ,
'radioWrapper' => '{{label}}' ,
'textarea' => '<textarea class="form-control" name="{{name}}"{{attrs}}>{{value}}</textarea>' ,
'submitContainer' => '<div class="">{{content}}</div>' ,
]
And currently it generate this
<div class="form-group form-md-line-input">
<label class="col-lg-2 control-label">
<input class="form-control"
name="active"
value="0"
type="hidden">
<label for="active">
<input name="active"
value="1"
id="active"
checked="checked"
type="checkbox">
Active
</label>
</label>
<div class="col-md-10">
<div class="md-checkbox-list">
<div class="md-checkbox">
<input id=""
class="md-check"
type="checkbox">
<label for="">
<span></span>
<span class="check"></span>
<span class="box"></span></label>
</div>
</div>
</div>
</div>
I'm wondering what should be my config to cakephp generate chekboxes as I want
in the theme I am using id="***this_part_should_be_match" and for="***this_part_should_be_match" should be the same to displays properly
I'm using cakephp 3.5 but I think it should be same in 3.*
I`ll appreciate any help

Add this to the config
'checkboxContainer' => '<div class="form-group form-md-line-input"><label class="col-md-2 control-label" for="form_control_1">{{title}}</label>
<div class="col-md-10">
<div class="md-checkbox-inline">
<div class="md-checkbox">
{{content}}{{label}}
<span></span>
<span class="check"></span>
<span class="box"></span>
</label>
</div>
</div>
</div>
</div>'
You'll have to set the title with the templateVars option when generating the checkbox
$this->Form->control('some_checkbox', ['type' => 'checkbox', 'templateVars' => ['title' => 'checkbox_title']);

Related

How to attach to User create multiple checkboxes during laravel authentication

Good afternoon everyone!
In my project I have to create a new user which will be a restaurant directly in the user's registration.
Once registered, I gave the possibility to associate more types of restaurant to the logged in user.
I made already migrations and relations everything is working.
This is what i wrote to permit the logged user(restaurant) to add more typologies.
public function typologyAdd() {
$typologies = Typology::all();
return view('pages.typology-add',compact('typologies'));
}
public function typologyStore(Request $request) {
$data = $request -> all();
$user = Auth::user();
$typologies = Typology::findOrFail($data['typologies']);
$user -> typologies() -> sync($typologies);
return redirect() -> route('home');
}
So this is working only once i register the user.
i want to put this logic when i'm in registration page.
I was trying to modify the RegisterController but i don't know how to do that:
protected function validator(array $data)
{
return Validator::make($data, [
'name' => ['required', 'string', 'max:255'],
'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
'indirizzo' => ['required' ,'string','max:255'],
'piva' => ['required','string','min:11','max:11','digits:11','unique:users'],
'password' => ['required', 'string', 'min:8', 'confirmed'],
]);
}
/**
* Create a new user instance after a valid registration.
*
* #param array $data
* #return \App\User
*/
protected function create(array $data)
{
return User::create([
'name' => $data['name'],
'email' => $data['email'],
'indirizzo' => $data['indirizzo'],
'piva' => $data['piva'],
'password' => Hash::make($data['password']),
]);
}
and to put checkboxes inside the Register.blade.php
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
#if ($errors->any())
<div class="alert alert-danger">
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<div class="card-header">{{ __('Register') }}</div>
<div class="card-body">
<form method="POST" action="{{ route('register') }}">
#csrf
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control #error('name') is-invalid #enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
#error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control #error('email') is-invalid #enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
#error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control #error('password') is-invalid #enderror" name="password" required autocomplete="new-password">
#error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
<div class="col-md-6">
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
</div>
</div>
<div class="form-group row">
<label for="indirizzo" class="col-md-4 col-form-label text-md-right">{{ __('indirizzo') }}</label>
<div class="col-md-6">
<input id="indirizzo" type="text" class="form-control" name="indirizzo" value="{{ old('indirizzo') }}" maxlength="255" required>
#error('indirizzo')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="piva" minlenght="11" maxlength="11" class="col-md-4 col-form-label text-md-right">{{ __('piva') }}</label>
<div class="col-md-6">
<input id="piva" type="text" class="form-control #error('piva') is-invalid #enderror" name="piva" value="{{ old('piva') }}" required>
#error('piva')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Register') }}
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
I hope someone will give me some ideas on how to do it, thanks to those who will read and answer
In the RegisterController.php you can get the newly created user by doing the below.
protected function create(array $data)
{
$user = User::create([
'name' => $data['name'],
'email' => $data['email'],
'indirizzo' => $data['indirizzo'],
'piva' => $data['piva'],
'password' => Hash::make($data['password']),
]);
// Do actions on $user and finally return $user
return $user;
}
Add new validations rules if you need any & also if you are doing relation data entry i would suggest to do a SQL transaction based insert. Commit data if no SQL error is thrown. Else rollback the changes to prevent issues.

Getting the right Checkbox Value in Array

I have a form where i collect data from checkboxes.
Here is my form
<div class="col-md-6">
<textarea name='description[]' placeholder="{{ Lang::get('core.description') }}" rows='6' id='description' class='form-control' required>
{{ $day->description }}
</textarea>
<div class="col-md-12">
<?php $meal = explode(",", $day->meal); ?>
<label class='checked checkbox-inline'>
<input type='checkbox' name='meal[]' value ='B' class='' #if(in_array('B',$meal))checked #endif />
{{ Lang::get('core.breakfast') }}
</label>
<label class='checked checkbox-inline'>
<input type='checkbox' name='meal[]' value ='L' class='' #if(in_array('L',$meal))checked #endif />
{{ Lang::get('core.lunch') }}
</label>
<label class='checked checkbox-inline'>
<input type='checkbox' name='meal[]' value ='D' class='' #if(in_array('D',$meal))checked #endif />
{{ Lang::get('core.dinner') }}
</label>
</div>
</div>
And this is my controller
$day = $_POST['day'] ;
for($i=0; $i < count($day); $i++)
{
$dataDays = array(
'day' => $_POST['day'][$i],
'title' => $_POST['title'][$i],
'meal' => implode(',', (array)$_POST['meal'] ),
'description' => $_POST['description'][$i],
'cityID' => $_POST['cityID'][$i],
'tourID' => $id
);
\DB::table('tour_detail')->insert($dataDays);
}
I get all the data right except meal. What am i missing with implode? I tried one without array as implode(',', $_POST['meal'] ), this didnt help. I tried implode(',', $_POST['meal'][$i] ) but i got an error. Can you please tell me how can i get the right data from checkboxes.
thanks

How to properly customize CakePHP3 FormHelpers Radio buttons [duplicate]

Cakephp 3 create a radio container with label -> input like that
<div class="radio">
<label class="radio-acces-checked" for="condition-access-1">
<input id="condition-access-1" type="radio" value="1" name="condition_access">
Free access
</label>
</div>
...
I would like change structure but it does not work, it's always the same strucure... Do you have an idea about how to solve my problem ?
$myTemplates = [
'radioWrapper' => '<div class="radio">{{label}}{{input}}</div>'
];
echo $this->Form->radio('condition_access', [
['value' => 1, 'text' => __('Free Access')],
['value' => 2, 'text' => __('Payment Access')],
['value' => 3, 'text' => __('Reduce price')]
]);
You need to set the nestingLabel template:
echo $this->Form->input('condition_access', [
'type' => 'radio',
'options' => [
['value' => 1, 'text' => __('Free Access')],
['value' => 2, 'text' => __('Payment Access')],
['value' => 3, 'text' => __('Reduce price')]
],
'templates' => [
'nestingLabel' => '{{hidden}}<label{{attrs}}>{{text}}</label>{{input}}',
'radioWrapper' => '<div class="radio">{{label}}</div>'
]
]);
Output:
<div class="input radio">
<label>Condition Access</label>
<input name="condition_access" value="" type="hidden">
<div class="radio">
<label for="condition-access-1">Free Access</label>
<input name="condition_access" value="1" id="condition-access-1" type="radio">
</div>
<div class="radio">
<label for="condition-access-2">Payment Access</label>
<input name="condition_access" value="2" id="condition-access-2" type="radio">
</div>
<div class="radio">
<label for="condition-access-3">Reduce price</label>
<input name="condition_access" value="3" id="condition-access-3" type="radio">
</div>
</div>

how to create dynamic form in angularjs?

My error description:
step 1: I am appending template using this directive.
step 2: Now I remove this appended template using this scope function "removeMilestoneDiv".
step 3: After submit my form. But, I can't submitted.
I think I have add template then bind this scope variable. But, i have remove this template then scope variable is can't unbind.
Create directive for add milestone:
app.directive('addMilestone', ['$compile', function ($compile) { // inject $compile service as dependency
return {
restrict: 'A',
link: function (scope, element, attrs) {
// click on the button to add new input field
element.find('a').bind('click', function () {
// I'm using Angular syntax. Using jQuery will have the same effect
// Create input element
// var input = angular.element('<div id="scope.mileStoneId_'+ scope.mileStoneCounter +'" class="form">Milestone - '+scope.mileStoneCounter+'</div>');
var input = angular.element(''+
'<div class="card bg-white" id="mileStoneDiv_'+ scope.mileStoneCounter +'">'+
'<div class="card-header" ng-bind="\'project.ADD_MILESTONE\' | translate"></div>'+
''+
'<div class="card-block m-b-0">'+
'<div compile-template class="form-group">'+
'<label class="col-sm-2 control-label"><span ng-bind="\'project.COMPANY_MILESTONE_ID\' | translate"></span></label>'+
'<div class="col-sm-5">'+
'<input type="text" class="form-control" ng-model="company_milestone_id['+ scope.mileStoneCounter +']" ng-maxlength="100" name="company_milestone_id_'+ scope.mileStoneCounter +'" required>'+
'<div ng-messages="frmProjectAdd[\'company_milestone_id_'+scope.mileStoneCounter+'\'].$error" role="alert" class="help-block has-error">'+
'<span ng-message="required" class="help-block has-error">Company Milestone Id is required.</span>'+
'<span class="help-block has-error" ng-message="maxlength">Maximum 100 characters allowed!</span>'+
'</div>'+
'</div>'+
'</div>'+
'<div compile-template class="form-group">'+
'<label class="col-sm-2 control-label" ng-bind="\'project.MILESTONE_NAME\' | translate"></label>'+
'<div class="col-sm-5">'+
'<input type="text" ng-maxlength="100" class="form-control" ng-model="milestone_name['+ scope.mileStoneCounter +']" name="milestone_name_'+ scope.mileStoneCounter +'" required>'+
'<div ng-messages="frmProjectAdd[\'milestone_name_'+scope.mileStoneCounter+'\'].$error" class="has-error login-error">'+
'<span ng-message="required" class="help-block has-error">Milestone Name is required.</span>'+
'</div>'+
'</div>'+
'</div>'+
'<div compile-special-template class="form-group">'+
'<label class="col-sm-2 control-label" ng-bind="\'project.SELECT_EMPLOYEE\' | translate"></label>'+
'<div class="col-sm-10">'+
'<select style="min-width:250px;" ui-select2 name="select_new_employee_'+scope.mileStoneCounter+'" ng-model="selectEmployee['+ scope.mileStoneCounter +']" data-placeholder="Select Employee" ng-required="true" multiple>'+
'<option ng-repeat="manager in managerList" value="{{manager.id}}">{{manager.username}}</option>'+
'</select>'+
'</div>'+
'<div ng-messages="frmProjectAdd[\'select_new_employee_'+scope.mileStoneCounter+'\'].$error" class="has-error login-error">'+
'<span ng-message="required" class="help-block has-error">Employee is required.</span>'+
'</div>'+
'</div>'+
'</div>');
// Compile the HTML and assign to scope
var compile = $compile(input)(scope);
// Append input to div
$('#milestoneHtml').append(input);
// Increment the counter for the next input to be added
scope.mileStoneCounter++;
});
}
}
}]);
Remove milestone using this function:
$scope.removeMilestoneDiv = function(key, id, flag) {
var confirmVal = confirm("Are you sure you want to delete this Milestone?");
if(confirmVal) {
$('#mileStoneDiv_'+key).remove();
if(flag == 1){
if(id != 0) {
$scope.deletedMilestoneIds.push(id);
}
}
}
},
Create One Array:
$scope.mileStoneCounterNew = [{
'countId':1,
'company_milestone_id':'',
'milestone_name':'',
'milestone_start_date':'',
'milestone_end_date':'',
'milestone_completion_date':'',
'selectEmployee':'',
}];
Create one scope function
$scope.milestoneHtmlAdd = function() {
$scope.mileStoneCounter++;
var counterObj = {countId: $scope.mileStoneCounter };
$scope.mileStoneCounterNew.push(counterObj);
};
My Dynamic HTML
<!-- Add Milestone - Start -->
<div class="row" ng-repeat="(counterKey, counterValue) in mileStoneCounterNew" id="milestone_display_id_{{counterValue.countId}}">
<div class="card bg-white mt50">
<div class="card-header"><span ng-bind="'project.ADD_MILESTONE' | translate"></span></div>
<a ng-if="counterKey > 0" href="javascript:void(0)" class="removebtn glyphicon glyphicon-remove form-control-feedback" ng-click="milestoneDivRemove(counterKey,0,0)"></a>
<div class="card-block m-b">
<!--Milestone sub section-->
<!-- Company Milestone Id -->
<div class="form-group">
<label class="col-sm-2 control-label"><span ng-bind="'project.COMPANY_MILESTONE_ID' | translate"></span></label>
<div class="col-sm-5">
<input type="text" class="form-control" ng-model="counterValue.company_milestone_id" ng-maxlength="100" name="company_milestone_id_{{counterValue.countId}}" required>
<div ng-if="frmProjectAdd.$submitted || frmProjectAdd['company_milestone_id_'+counterValue.countId].$touched" ng-messages="frmProjectAdd['company_milestone_id_'+counterValue.countId].$error" role="alert" class="help-block has-error">
<span ng-message="required" class="help-block has-error">Company Milestone Id is required.</span>
<span class="help-block has-error" ng-message="maxlength">Maximum 100 characters allowed!</span>
</div>
</div>
</div>
<!-- Milestone name -->
<div class="form-group">
<label class="col-sm-2 control-label"><span ng-bind="'project.MILESTONE_NAME' | translate"></span></label>
<div class="col-sm-5">
<input type="text" class="form-control" ng-model="counterValue.milestone_name" ng-maxlength="100" name="milestone_name_{{counterValue.countId}}" required>
<div ng-if="frmProjectAdd.$submitted || frmProjectAdd['milestone_name_'+counterValue.countId].$touched" ng-messages="frmProjectAdd['milestone_name_'+counterValue.countId].$error" role="alert" class="help-block has-error">
<span ng-message="required" class="help-block has-error">Milestone Name is required.</span>
<span class="help-block has-error" ng-message="maxlength">Maximum 100 characters allowed!</span>
</div>
</div>
</div>
<!-- Milestone Start Date -->
<div class="form-group">
<label class="col-sm-2 control-label"><span ng-bind="'project.MILESTONE_START_DATE' | translate"></span></label>
<div class="col-sm-3">
<div class="input-group">
<input name="milestone_start_date_{{counterValue.countId}}" type="text" uib-datepicker-popup="MM/dd/yyyy" ng-model="counterValue.milestone_start_date" is-open="dpOpened['milestone_start_date_'+counterValue.countId]" ng-click="milestone_start_date[counterValue.countId].open = true" max-date="maxDate" datepicker-options="dateOptions" close-text="Close" ng-required="true" class="form-control"
min-date="minDate" ng-change="set_min_milestone_end_Date(milestone_start_date[counterValue.countId])"
disabled>
<span class="input-group-addon" ng-click="open($event,'milestone_start_date_{{counterValue.countId}}')"><i class="fa fa-calendar"></i></span>
</div>
<div ng-if="frmProjectAdd.$submitted || frmProjectAdd['milestone_start_date_'+counterValue.countId].$touched" ng-messages="frmProjectAdd['milestone_start_date_'+counterValue.countId].$error" role="alert" class="help-block has-error">
<span ng-message="required" class="help-block has-error">Milestone Start Date is required.</span>
</div>
</div>
</div>
<!-- Milestone End Date -->
<div class="form-group">
<label class="col-sm-2 control-label"><span ng-bind="'project.MILESTONE_END_DATE' | translate"></span></label>
<div class="col-sm-3">
<div class="input-group">
<input name="milestone_end_date_{{counterValue.countId}}" type="text" uib-datepicker-popup="MM/dd/yyyy" ng-model="counterValue.milestone_end_date" is-open="dpOpened['milestone_end_date_'+counterValue.countId]" ng-click="milestone_end_date[counterValue.countId].open = true" max-date="maxDate" datepicker-options="dateOptions" close-text="Close" ng-required="true" class="form-control"
min-date="milestone_end_minDate" ng-change="set_min_milestone_completed_Date(milestone_end_date[counterValue.countId])"
disabled>
<span class="input-group-addon" ng-click="open($event,'milestone_end_date_{{counterValue.countId}}')"><i class="fa fa-calendar"></i></span>
<div ng-if="frmProjectAdd.$submitted || frmProjectAdd['milestone_end_date_'+counterValue.countId].$touched" ng-messages="frmProjectAdd['milestone_end_date_'+counterValue.countId].$error" role="alert" class="help-block has-error">
<span ng-message="required" class="help-block has-error">Milestone End Date is required.</span>
</div>
</div>
</div>
</div>
<!-- Milestone Completion Date -->
<div class="form-group">
<label class="col-sm-2 control-label"><span ng-bind="'project.MILESTONE_COMPLETION_DATE' | translate"></span></label>
<div class="col-sm-3">
<div class="input-group">
<input type="text" uib-datepicker-popup="MM/dd/yyyy" ng-model="counterValue.milestone_completion_date" is-open="dpOpened['milestone_completion_date_'+counterValue.countId]" ng-click="milestone_completion_date[counterValue.countId].open = true" max-date="maxDate" datepicker-options="dateOptions" close-text="Close" class="form-control"
min-date="milestone_completed_minDate" disabled>
<span class="input-group-addon" ng-click="open($event,'milestone_completion_date_{{counterValue.countId}}')"><i class="fa fa-calendar"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"><span ng-bind="'project.SELECT_EMPLOYEE' | translate"></span></label>
<div class="col-sm-10">
<select name="select_employee_{{counterValue.countId}}" ui-select2 ng-model="counterValue.selectEmployee" data-placeholder="Select Employee" ng-required="true" multiple>
<option ng-repeat="manager in managerList" value="{{manager.id}}">{{manager.username}}</option>
</select>
<div ng-if="frmProjectAdd.$submitted || frmProjectAdd['select_employee_'+counterValue.countId].$touched" ng-messages="frmProjectAdd['select_employee_'+counterValue.countId].$error" role="alert" class="help-block has-error">
<span ng-message="required" class="help-block has-error">Employee is required.</span>
</div>
</div>
</div>
<!-- Milestone sub section -->
</div>
</div>
</div>
<!-- Add Milestone End -->

How to create an object from form data in Angular

I have a pretty complex object that I need to send from a form in Angular.
Basically the object looks like this:
vm.formData = {
active: 1,
parse_tree : {
exlude: [],
include: [],
tag: ''
},
tag: '',
term: ''
}
My problem is creating new objects inside the include or exclude arrays.
Not sure how to do that.
Basically if you type in a tag name inside the row with "With all of these" as the label, it needs to create a new object inside of the include array, and if you click the checkbox 'Exact match' next to the tag input, it needs to add exact : 1. If 'Exact match' is unchecked, then exact : 0.
parse_tree : {
exlude: [],
include: [
{
exact: 1,
term: "hello"
}
],
tag: ''
}
My form HTML:
<div class="row">
<div class="col-sm-2 advanced-label">Main Tag:</div>
<div class="col-sm-4">
<input ng-model="tc.formData.term"
id="new-main-tag"
type="text"
class="form-control"
placeholder="tag">
<input ng-model="tc.formData.parse_tree.include.obj.exact"
ng-true-value="1" ng-false-value="0"
for="new-main-tag"
type="checkbox">
<em>Exact match</em>
</div>
<div class="col-sm-4">
<select ng-model="tc.formData.tag"
class="form-control manage-source-input-tag">
<option value="companies">companies</option>
<option value="news" selected="">news</option>
<option value="people">people</option>
<option value="products">products</option>
</select>
</div>
<div class="col-sm-2">
<button ng-click="tc.showSimpleForm()"
class="btn btn-info btn-sm switch-btn">Switch to simple</button>
</div>
</div>
<div class="row">
<div class="col-sm-2 advanced-label">
With all of these:
</div>
<div class="col-sm-2">
<input ng-model="tc.withAll1"
id="with-all-1" type="text" class="form-control" placeholder="tag">
<input type="checkbox" for="with-all-1">
<em>Exact match</em>
</div>
<div class="col-sm-2">
<input ng-model="tc.withAll2"
id="with-all-2" type="text" class="form-control" placeholder="tag">
<input type="checkbox" for="with-all-2">
<em>Exact match</em>
</div>
<div class="col-sm-2">
<input ng-model="tc.withAll3"
id="with-all-3" type="text" class="form-control" placeholder="tag">
<input type="checkbox" for="with-all-3">
<em>Exact match</em>
</div>
<div class="col-sm-2">
<input ng-model="tc.withAll4"
id="with-all-4" type="text" class="form-control" placeholder="tag">
<input type="checkbox" for="with-all-4">
<em>Exact match</em>
</div>
<div class="col-sm-2">
<input ng-model="tc.withAll5"
id="with-all-5" type="text" class="form-control" placeholder="tag">
<input type="checkbox" for="with-all-5">
<em>Exact match</em>
</div>
</div>
<div class="row">
<div class="col-sm-2 advanced-label">
With none of these:
</div>
<div class="col-sm-2">
<input ng-model="tc.withNone1"
id="with-none-1" type="text" class="form-control" placeholder="tag">
<input type="checkbox" for="with-none-1">
<em>Exact match</em>
</div>
<div class="col-sm-2">
<input ng-model="tc.withNone1"
id="with-none-2" type="text" class="form-control" placeholder="tag">
<input type="checkbox" for="with-none-2">
<em>Exact match</em>
</div>
<div class="col-sm-2">
<input ng-model="tc.withNone1"
id="with-none-3" type="text" class="form-control" placeholder="tag">
<input type="checkbox" for="with-none-3">
<em>Exact match</em>
</div>
<div class="col-sm-2">
<input ng-model="tc.withNone1"
id="with-none-4" type="text" class="form-control" placeholder="tag">
<input type="checkbox" for="with-none-4">
<em>Exact match</em>
</div>
<div class="col-sm-2">
<input ng-model="tc.withNone1"
id="with-none-5" type="text" class="form-control" placeholder="tag">
<input type="checkbox" for="with-none-5">
<em>Exact match</em>
</div>
</div>
<div class="row">
<div class="col-sm-2 advanced-label">Tag Notes:</div>
<div class="col-md-5">
<textarea></textarea>
<input type="checkbox" aria-label="exact-match">
<em>Unsure</em>
</div>
<div class="col-md-5"></div>
</div>
<div class="row advanced-action-row">
<button class="btn btn-success btn-sm manage-term-add">Save</button>
</div>
For includes: (do same for excludes)
vm.formData = {
active: 1,
parse_tree : {
exlude: [],
include: [{}, {}, {}, {}, {}],
tag: ''
},
tag: '',
term: ''
}
Use ng-repeat:
<div class="col-sm-2" ng-repeat="smth in vm.formData.parse_tree.include">
<input ng-model="smth.term" type="text" class="form-control" placeholder="tag">
<input type="checkbox" ng-model="smth.exact">
<em>Exact match</em>
</div>
Now if u really need exact:1 and nothing otherwise, modify checkbox:
<input type="checkbox" ng-click="change(smth)">
In controller define change func:
if (smth.term) {
delete smth.term;
} else {
smth.term = 1;
}

Resources