Am developing an mobile app using angular ionic framework.
In this i am listing a grouping a component in loop and displaying in UI. But the view is not showing full page.
My View page
<ion-grid *ngFor="let dart of darts;let index = index; trackBy:trackByIndex;" scope="row">
<ion-row>
<ion-col>
From Time: <input type='text' class="form-control" name='from-{{index}}' [(ngModel)]="dart.fromTime" />
</ion-col>
</ion-row>
<ion-row>
<ion-col>
To Time: <input type='text' class="form-control" #toTime='ngModel' name='toTime-{{index}}'
[(ngModel)]=dart.toTime />
</ion-col>
</ion-row>
<ion-row>
<ion-col>
Plan Task: <input type='text' class="form-control" #plannedTask='ngModel' name='plannedTask-{{index}}'
[(ngModel)]=dart.plannedTask />
</ion-col>
</ion-row>
<ion-row>
<ion-col>
Remarks: <input type='text' class="form-control" #remarks='ngModel' name='remarks-{{index}}'
[(ngModel)]=dart.remarks />
</ion-col>
</ion-row>
<hr />
</ion-grid>
<div class="form-group">
<button class="btn btn-primary" type='submit'>Add Day Plan</button>
</div>
</form>
</ion-content>
Component code
darts: Dart[] = [];
ngOnInit() {
const dart1 = new Dart('', '', '08:00 AM', '09:00 AM', '', '');
const dart2 = new Dart('', '', '09:00 AM', '10:00 AM', '', '');
const dart3 = new Dart('', '', '10:00 AM', '11:00 AM', '', '');
const dart4 = new Dart('', '', '11:00 AM', '12:00 AM', '', '');
const dart5 = new Dart('', '', '12:00 AM', '01:00 PM', '', '');
const dart6 = new Dart('', '', '01:00 PM', '02:00 PM', '', '');
const dart7 = new Dart('', '', '02:00 PM', '03:00 PM', '', '');
const dart8 = new Dart('', '', '03:00 PM', '04:00 PM', '', '');
const dart9 = new Dart('', '', '04:00 PM', '05:00 PM', '', '');
const dart10 = new Dart('', '', '05:00 PM', '06:00 PM', '', '');
const dart11 = new Dart('', '', '06:00 PM', '07:00 PM', '', '');
this.darts.push(dart1);
this.darts.push(dart2);
this.darts.push(dart3);
this.darts.push(dart4);
this.darts.push(dart5);
this.darts.push(dart6);
this.darts.push(dart7);
this.darts.push(dart8);
this.darts.push(dart9);
this.darts.push(dart10);
this.darts.push(dart11);
}
}
And the output am getting is
In output i cant view my action button.
Can someone help me yo solve this.
EDIT1:
In last row if i press tab from plan task its showing full page and in top a text coming as plan task. I dont understand this. Can someone clarify this.
Related
Suppose I change the start date and click on End Date before render the start date. Then datepicker of End date will be close because of rendering of start date value. If you have any solution or any datepicker suggestion, please help me.
Blade File
<div class="col">
<label for="">Start Date <span class="text-danger">*</span></label>
<input type="text" name="start_date" wire:model.lazy='start_date'
class="form-control #error('start_date') is-invalid #enderror">
#error('start_date')
<small class="text-danger">{{ $message }}</small>
#enderror
</div>
<div class="col">
<label for="">End Date <span class="text-danger">*</span></label>
<input type="text" name="end_date" wire:model.lazy='end_date'
class="form-control #error('end_date') is-invalid #enderror">
#error('end_date')
<small class="text-danger">{{ $message }}</small>
#enderror
</div>
My Script Code for Datepicker
<script>
$('input[name=start_date]').datetimepicker({
format: "DD/MM/YYYY",
disabledDates: false,
useCurrent: false,
showClear: true,
showClose: true,
showTodayButton: true,
});
$('input[name=start_date]').on("dp.change", function(e) {
#this.set('start_date', e.target.value);
});
$('input[name=end_date]').datetimepicker({
format: "DD/MM/YYYY",
disabledDates: false,
useCurrent: false,
showClear: true,
showClose: true,
showTodayButton: true,
});
$('input[name=end_date]').on("dp.change", function(e) {
#this.set('end_date', e.target.value);
});
</script>
If I'm not misunderstand you question why you use "wire:model.lazy" ? "wire:model" remove .lazy might be fixed your problem?
I would like to implement a date timepicker with Algolia. If I choose a date, all elements should be displayed from this date.
Unfortunately, I have no idea how I can make this with Agolia.
I hope you can help me.
const datePicker = instantsearch.connectors.connectRange(
(options, isFirstRendering) => {
if (!isFirstRendering) return;
new Calendar({
element: $('.daterange--single'),
current_date: new Date(),
format: {input: 'DD.MM.YYYY'},
required: false,
callback: function() {
const start = new Date().getTime();
refine([start]);
},
});
}
);
search.addWidget(
datePicker({
attributeName: 'date',
})
);
<div class="daterange daterange--single"></div>
now i have a working code. Now a have the problem.. how i can change in my custom widget the searchParameters?
const search = instantsearch({
appId: '0000000',
apiKey: '000000000000',
indexName: 'Events',
routing: true,
searchParameters:{
filters: 'dateNumeric >= 1531591200'
}
});
var customWidget = {
init: function(options) {
$( "#datetimepickerNotime" ).focusout(function() {
var date = $('#datefromdatetimepicker').val();
var date = new Date (date);
alert("dateNumeric >= 1512752400");
});
}
};
search.addWidget(customWidget);
<div class='input-group date' id="datetimepickerNotime">
<input type='text' id="datefromdatetimepicker" name="date" class="form-control" autocomplete="off" value="<f:format.date date='now' format='d.m.Y' />"/>
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
import { Formik, Field } from 'formik';
import { connectRange } from 'react-instantsearch-dom';
import * as Yup from 'yup';
const RangeFilter = ({ currentRefinement, min, max, refine }) => {
const validationSchema = Yup.object().shape({
minValue: Yup.number().min(min, `Minimum value must be at least ${min}`),
maxValue: Yup.number().max(max, `Maximum value must be at most ${max}`),
});
const onSubmit = (values) => {
refine({ min: values.minValue, max: values.maxValue });
};
return (
<Formik
onSubmit={onSubmit}
validationSchema={validationSchema}
initialValues={{
minValue: currentRefinement?.min,
maxValue: currentRefinement?.max,
}}>
{({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<Field name="minValue">
{({ field, form: { errors, touched } }) => (
<div>
<label htmlFor="price-min">To price:</label>
<input
className="input is-shadowless"
{...field}
id="price-min"
type="number"
placeholder="Min price"
/>
{errors.minValue && touched.minValue && (
<p className="help is-danger">{errors.minValue}</p>
)}
</div>
)}
</Field>
<Field name="maxValue">
{({ field, form: { errors, touched } }) => (
<div className="mt-2">
<label htmlFor="price-max">From price:</label>
<input
{...field}
id="price-max"
type="number"
className="input is-shadowless"
placeholder="Max price"
/>
{errors.maxValue && touched.maxValue && (
<p className="help is-danger">{errors.maxValue}</p>
)}
</div>
)}
</Field>
<button type="submit" className="ais-RefinementList-showMore mt-2">
Get Result
</button>
</form>
)}
</Formik>
);
};
export default connectRange(RangeFilter);
Hi I am developing web application in angular2. I have form in popup. On closing popup I want to reset all the fields. For example, If required error occurs then if i close and reopen the modal then same error message will be there. On closing popup error message should also go. Below is my html code.
<div *ngIf="isPopupOpen()" [ngClass]="{'modal-pop-close': _isClose}" id="myModal" class="modal-pop">
<!-- Modal content -->
<div class="modal-content-pop">
<span class="close" (click)="close()">×</span>
<h4 class="modal-title pull-left center-text"><i></i> New User</h4>
<form *ngIf="formResetToggle" class="form-horizontal" name="useronboardEditorForm" #f="ngForm" novalidate
(ngSubmit)="f.form.valid ? save() :
(!username.valid && showErrorAlert('User name is required', 'Please enter user name'));">
<div class="form-group-btn">
<label for="username" class="user-name">User Name</label>
<br />
<input [ngClass]="{'has-success': f.submitted && username.valid, 'has-error1' : f.submitted && !username.valid}"
[(ngModel)]="asyncSelected"
[typeahead]="dataSource"
(typeaheadLoading)="changeTypeaheadLoading($event)"
(typeaheadNoResults)="changeTypeaheadNoResults($event)"
(typeaheadOnSelect)="typeaheadOnSelect($event)"
[typeaheadOptionsLimit]="2"
typeaheadOptionField="userName"
[typeaheadMinLength]="3"
placeholder="Search Users"
[disabled]="false"
class="form-controlBtn usernameBtn" type="text" name="username" autocomplete="off" #username="ngModel" required >
<div *ngIf="typeaheadLoading===true" style="margin-left:174px;">Loading</div>
<div *ngIf="typeaheadNoResults===true" style="margin-left:174px;">❌ No Results Found</div>
<span *ngIf="f.submitted" class="glyphicon form-control-feedback" [ngClass]="{'glyphicon-ok ':username.valid, 'glyphicon-remove' : !username.valid}"></span>
<br />
<span *ngIf="f.submitted && !username.valid" class="errorMessageText">
User Name Required!
</span>
<!--</div>-->
</div>
<div>
<div>
<button type="submit" class="btn-primary">Add User</button>
</div>
</div>
<div class="clearfix"></div>
</form>
</div>
</div>
Below is ts file.
import { FormsModule, NgForm } from "#angular/forms";
#Component({
selector: 'onboard-editor',
templateUrl: './onboard-editor.component.html',
styleUrls: ['./onboard-editor.component.css']
})
export class OnBoardEditorComponent implements OnInit {
ngOnInit() {
this.loadUsers();
this.loadingIndicator = true;
let gT = (key: string) => this.translationService.getTranslation(key);
this.columns = [
{ prop: "index", name: '#', width: 30, headerTemplate: this.statusHeaderTemplate, cellTemplate: this.statusTemplate, resizeable: false, canAutoResize: false, sortable: false, draggable: false },
{ prop: 'username', name: 'User Name', cellTemplate: this.nameTemplate, width: 200 },
{ prop: 'emailaddress', name: 'Email Address', cellTemplate: this.nameTemplate, width: 200 },
{ prop: 'isallowed', name: 'Allow/Deny', cellTemplate: this.toggleAllowDenyTemplate, width: 200 },
{ name: '', width: 80, cellTemplate: this.actionsTemplate, resizeable: false, canAutoResize: false, sortable: false, draggable: false }
];
}
close() {
this._isClose = true;
}
In the .Ts file i have around 500 lines of code. But I have not added all code here.
On close() I want to reset the form controls. Can someone help me to fix? Thanks
I have a problem, how to create one filtered autocomplete list and use it in different form array controls.
My form model:
this.prodForm = this.fb.group({
date: ['', Validators.required],
priority: ['', Validators.required],
products: this.fb.array([])
});
var product = this.fb.group({
name: '',
isTrial: '',
})
Autocomplete list:
this.filteredMachineProducts = this.productCtrl.valueChanges.
startWith(null).
map(name => this.filterMachineProducts(name));
filterMachineProducts(val: string) {
return val ? this.machineProducts.filter((s) => s.name.match(new RegExp(val, 'gi'))) : this.machineProducts;
}
And front:
<div formArrayName="products">
<div *ngFor="let product of products.controls; let p=index" [formGroupName]="p">
<mat-expansion-panel [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
Produkt #{{p + 1}}
<mat-panel-description>
<button mat-raised-button color="primary" type="button" (click)="removeProduct(p)">Usuń</button>
</mat-panel-description>
</mat-panel-title>
</mat-expansion-panel-header>
<div fxLayout="row" fxLayoutWrap="wrap">
<div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100">
<mat-form-field>
<input matInput placeholder="Asortyment" [matAutocomplete]="productAutoComplete" [formControl]="productCtrl">
</mat-form-field>
<mat-autocomplete #productAutoComplete="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let machineProduct of filteredMachineProducts | async" [value]="machineProduct" (onSelectionChange)="getProductMachine(machineProduct, p)">
<span>{{ machineProduct.name }}</span>
</mat-option>
</mat-autocomplete>
</div>
At this moment I use separate formControl but it should be formControlName="name".
Should I create filtered list for each autocomplete in loop?
Yes, You need to create a filtered list for each auto-complete.
I have answered a question of this sort here.
i want to add a new custom field to registration page.
step 1
i change the config xml (app\code\core\Mage\Customer\etc\config.xml) like this.
<customer_account>
<companyname>
<create>1</create>
<update>1</update>
<name>1</name>
</companyname>
</customer_account>
step 2
add the field to registration.phtml (app\design\frontend\template\customer\form\registration.phtml)
<div class="field">
<label for="password" class="required"><em>*</em><?php echo $this->__('Business Name') ?></label>
<div class="input-box">
<input type="text" name="companyname" id="companyname" title="<?php echo $this->__('companyname') ?>" class="input-text required-entry" />
</div>
</div>
step 3
insert the new attribute to database using this query.
insert into `eav_attribute` (`entity_type_id`, `attribute_code`, `attribute_model`, `backend_model`, `backend_type`, `backend_table`, `frontend_model`, `frontend_input`, frontend_label`, `frontend_class`, `source_model`, `is_required`, `is_user_defined`, `default_value`, `is_unique`, `note`)values(1, 'companyname', '', '', 'varchar', '', '', 'text', 'Company Name', '', '', 1, 0, '', 0,'');
my question is how to view the company name in customer account edit page.
great thank you if any one help me on this.
thanks
I found the way to add customise extra field.
Following are the steps for adding an extra field.
I change the config xml (app\code\core\Mage\Customer\etc\config.xml) like this.
<customer_account>
<businessregistration>
<create>1</create>
<update>1</update>
<name>1</name>
</companyname>
</businessregistration>
Add the field to registration.phtml (app\design\frontend\template\customer\form\registration.phtml)
<div class="field">
<label for="businessregistration" class="required"><em>*</em><?php echo $this->__('Buisiness Registration') ?></label>
<div class="input-box">
<input type="text" name="businessregistration" id="businessregistration" title="<?php echo $this->__('businessregistration') ?>" class="input-text required-entry" />
</div>
</div>
Add these queries to the database tables:
INSERT INTO `eav_attribute` (`attribute_id`, `entity_type_id`, `attribute_code`, `attribute_model`, `backend_model`, `backend_type`, `backend_table`, `frontend_model`, `frontend_input`, `frontend_label`, `frontend_class`, `source_model`, `is_required`, `is_user_defined`, `default_value`, `is_unique`, `note`)
VALUES (NULL, '1', 'buisinessregistration', NULL, NULL, 'text', NULL, NULL, 'text', 'Business Registration', NULL, NULL, '0', '0', NULL, '0', NULL);
965 is the last inserted id from above query.
Insert into `eav_entity_attribute`
set entity_type_id = 1,
attribute_set_id = 1,
attribute_group_id = 1,
attribute_id = 965,
sort_order = 111
insert into `customer_eav_attribute`
set attribute_id = "965",
is_visible = 1,
multiline_count = 1,
is_system = 0,
sort_order = 111
insert into `customer_form_attribute`
set form_code = "adminhtml_customer",
attribute_id = 965
insert into `customer_form_attribute`
set form_code = "checkout_register", attribute_id = 965
insert into `customer_form_attribute`
set form_code = "customer_account_create", attribute_id = 965
insert into `customer_form_attribute`
set form_code = "customer_account_edit", attribute_id = 965
Now the newly added "Business Registration" works fine for me.
Cheers.