I am currently refactoring an application and moving all form elements to one component called Control which will handle things like showing errors for a form control.
I currently have this part class="input" :class="{ 'is-danger' : errors['description'] }" left which is the same for every single component but slots can't be assigned any properties or attributes so what would be the way to solve the below issue and stop repeating that :class over and over?
control.vue
<template>
<p class="control">
<slot class="input" :class="{ 'error' : errors[model] }"></slot>
<template v-if="errors[model]">
<i class="fa fa-check"></i>
<span class="help error">{{ errors[model][0] }}</span>
</template>
</p>
</template>
<script>
export default {
props: {
model: String,
errors: Object,
}
}
</script>
usage - current
<control model="description" :errors="errors">
<input class="input" :class="{ 'is-danger' : errors['description'] }" type="text" v-model="item.description">
</control>
usage - goal
<control model="description" :errors="errors">
<input type="text" v-model="item.description">
</control>
Related
I have an html code with contains
<div class="form-card">
<h2 class="fs-title" test-data="area_1">
About DigCompEdu
</h2>
<p></p>
<label for="academic_teaching" class="question" test-data="question_1">
<b>1- </b>
</label>
<small id="academic_teachingHelp" class="form-text text-muted">
</small>
<div class="form-check question-form-check ">
<div class="row">
<div class="col-1">
<input class="radio" type="radio" value="0" id="3" name="2" test-data="answer_1" />
</div>
</div>
So, I have h1 with testdata name after that i have a form, this form contains question with multin check radio .. i want to access this check , not by just call ([test-data="answer_2"])
because i have another tips and don't want to check them as this one ,
i did smth like this but it's not working :
cy.get('[test-data="area_1"]~[test-data="answer_2"]').check({force: true})
Any one have another idea ?
It might be the ~ between the selectors, I haven't seen that before.
Does it work with a space between instead?
cy.get('[test-data="area_1"] [test-data="answer_2"]').check({force: true})
If the heading is followed by the form like this
<h2 class="fs-title" test-data="area_1">
About DigCompEdu
</h2>
<div class="form-check question-form-check ">
...
then you would query like this
cy.get('[test-data="area_1"]')
.next('.form-check') // next element on page
.find('[test-data="answer_2"]') // this looks inside '.form-check'
.check({force: true})
I'm starting to use the liferay-auto-fields composant.
So here is my jsp with the aui:script -->
<aui:form action="<%=saveMotiveURL%>" name="fm" method="post" enctype="multipart/form-data" onSubmit="setZones()" >
<aui:fieldset>
<aui:field-wrapper>
<div id="emailAdress-fields">
<label class="control-label"><liferay-ui:message key="motiveConfigEdit.col5"></liferay-ui:message> </label>
<div class="lfr-form-row lfr-form-row-inline">
<div class="row-fields">
<aui:input type="text" name="emailAdress1" fieldParam='emailAdress1' id='emailAdress1' label="" value=""/>
<aui:input type="hidden" name="motiveEmailId1" fieldParam='motiveEmailId1' id='motiveEmailId1' value=""/>
</div>
</div>
</div>
<aui:button type="submit" name="saveButton" value="button.create" label=""/>
</aui:field-wrapper>
</aui:fieldset>
</aui:form>
<aui:script>
AUI().use('liferay-auto-fields',function(A) {
new Liferay.AutoFields(
{
contentBox: '#emailAdress-fields',
fieldIndexes: '<portlet:namespace />rowIndexes'
}
).render();
});
</aui:script>
Then, i want to retrieve the "rowIndexes" in the processaction function, so i do :
String rowIndexes = actionRequest.getParameter("rowIndexes");
And this always gives me EMPTY.
I notice also that the hidden field in the jsp 'rowIndexes' doesn't change or have value when i had an autofield by clicking on the "+" button.
Is anyone has a solution ?
thanks
There are a couple of issues with your code you would like to address,
aui is deprecated and you should avoid when possible
prefer tags like
<liferay-frontend:edit-form>
<liferay-frontend:edit-form-body>
<liferay-frontend:fieldset-group>
<liferay-frontend:fieldset>
The following structure should work on the latest versions of Liferay:
<liferay-frontend:fieldset >
<div id='emailAdress-fields'>
<div class='lfr-form-row lfr-form-row-inline'>
<div class='row-fields'>
</div>
</div>
</div>
</liferay-frontend:fieldset>
Your script seems fine
<aui:script use='aui-base'>
A.use('liferay-auto-fields',function(A) {
new Liferay.AutoFields({
contentBox: '#emailAdress-fields',
fieldIndexes: '<portlet:namespace/>rowIndexes'
}).render();
})
</aui:script>
I have created a slider as in input field. I am not able to get its value in formGroup. I am stucked.
My code:
<form [formGroup]="Form" novalidate (ngSubmit)="BasicDetail(Form.value)>
<div class="col-md-8">
<div class="drags">
<input class="ex6" type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="5"/>
</div>
</div>
</form>
Help needed.
Make sure input is slider type, meaning range
type="range"
If you're going to create a submit form fucntion where you feed your form, then it's template-driven, so get rid of your formGroup property, (assuming this is what you want since you've shown no effort on the component.ts side)
Give your form a reference form
<form #form="ngForm" novalidate (ngSubmit)="BasicDetail(form.value)">
Create a button to submit
<button class="btn btn-primary"type="submit"> Submit </button>
Make sure to give your form input a name, and assign it ngModel
If you want also direct access, create a two-way binding, say with variable called rangeValue
[(ngModel)]="rangeValue"
Make sure you're actually using real range input types, I don't know where you got data-slider from
<form #form="ngForm" novalidate (ngSubmit)="BasicDetail(form.value)">
<div class="col-md-8">
<div class="drags">
<input class="ex6"
type="range"
min="0" max="10"
step="1"
name="someRange"
[(ngModel)]="rangeValue"
ngModel/>
</div>
</div>
<button class="btn btn-primary"type="submit"> Submit </button>
</form>
Inside your component.ts, declare variable and try to log it on submit
rangeValue = 5;
constructor( ) {}
ngOnInit() {
}
BasicDetail(form: any) {
console.log(this.rangeValue);
console.log(form.someRange);
}
I'm trying to create an auto-complete list that appears as you type, but disappears when you click elsewhere on the document. How do I detect that a form input is focused using Angular 2. Angular 1 has ng-focus, but I don't think Angular 2 supports that anymore.
<input id="search-box" type="search" class="form-control [(ngModel)]=query (keyup)=filter()>
<div id="search-autocomplete" *ngIf="filteredList.length > 0">
<ul *ngFor="#item of filteredList" >
<li > <a (click)="select(item)">{{item}}</a> </li>
</ul>
</div>
By the way, I used this tutorial as guidance.
There are focus and blur events:
<input (blur)="onBlur()" (focus)="onFocus()">
For those using #angular/material, you can get a reference to the MatInput instance which implements MatFormFieldControl interface exposing a nice focused property.
<mat-form-field>
<input matInput #searchInput="matInput" type="text" />
<mat-icon matPrefix svgIcon="filter" [color]="searchInput.focused ? 'primary' : ''"></mat-icon>
</mat-form-field>
You could also use FocusMonitor from #angular/cdk.
https://material.angular.io/guide/creating-a-custom-form-field-control#focused
focused = false;
constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef<HTMLElement>) {
...
fm.monitor(elRef.nativeElement, true).subscribe(origin => {
this.focused = !!origin;
this.stateChanges.next();
});
}
ngOnDestroy() {
...
this.fm.stopMonitoring(this.elRef.nativeElement);
}
You can use the ngControl directive to track change-state and validity of form fields.
<input type="text" ngControl="name" />
The NgControl directive updates the control with three classes that reflect the state.
State: Control has been visited
ng-touched
ng-untouched
State: Control's value has changed
ng-dirty
ng-pristine
State: Control's value is valid
ng- valid
ng- invalid
I have a template like
script type: "text/template", id: "list-template", '''
<div class="display">
<div id="list-name"><%= name %></div>
<span class="list-destroy"></span>
</div>
<div>
<ul id="ul-cards">
</ul>
</div>
<div class="edit">
<input class="list-input" type="text" value="<%= name %>" />
<input id="btnEdit" type="button" value="Save" class="primary wide js-add-list" />
<input id="hdnListId" type="hidden" value="<%= listId%>" />
</div>
<form class="add-list-card js-add-list-card clearfix">
<textarea placeholder="Add card" class="new-card"></textarea>
<input type="button" value="Add" class="primary js-add-card">
<a class="app-icon close-icon dark-hover cancel js-cancel-add-card" href="#" id="closeCard"></a>
</form>
'''
in this template i have <ul id="ul-cards"> element in which i want to render another template which display list inside this ul.
this template is :
script type: "text/template", id: "card-template", '''
<div>
<span class="card-name"><%= name %></span>
</div>
'''
is it possible or i have to do it in another way?
please help me if anyone have idea.
thanks in advace.
it is worked but still i have one problem in data display in
<ul id="ul-cards"> there sholud be 2 as per records in my database but it will display only 1 . data fetch properly but display only last data.
There are two ways to do this: the DOM way and the template way.
The DOM way involves adding your views using DOM methods: you have your ListView and your CardView; the ListView invokes individual CardViews that fill in the ListView's element.
The template way requires that you remember this: backbone's views are policy frameworks, not policy templates. Render doesn't have to render into the DOM. You can use render() to return a string, for example. If your event manager is on the ListView object only (possible; I've done this), then you can have ListView invoke "the resulting array of an array of CardView renders" and insert that directly into ListView's template. This is actually faster, as you only require the browser to analyze the entire ListView HTML blob once, when it's inserted into the innerHTML of the parent DOM object.