I am working on a requirement where the user needs to select at least one value to get the result.
Here is my component.ts file
initializeForm():void{
this.myForm= this.frmBuilder.group({
field1: [null],
field2: [null],
field3: [null] )
}, this.AtLeastOneInputHasValue1);
}
AtLeastOneInputHasValue1=(validator: ValidatorFn) => (
group: FormGroup,
): ValidationErrors | null => {
const hasAtLeastOne =
group &&
group.controls &&
Object.keys(group.controls).some(k => !validator(group.controls[k]));
return hasAtLeastOne ? null : { atLeastOne: true };
};
get frm(): any {
return this.myForm.controls;
}
component.html
<form *ngIf="myForm" [formGroup]="myForm">
<div class="row">
<div class="col-md-2">
<label>Field1</label>
<p-autoComplete [(ngModel)]="Field1Model" field="Field1" formControlName="Field1"
(onSelect)="doSomething()" [multiple]="true">
</p-autoComplete>
<div *ngIf="frm.Field1.invalid && (frm.Field1.dirty || frm.Field1.touched)" class="text-danger">
<div *ngIf="frm.Field1.errors.required">Field1 is required</div>
</div>
</div>
<div class="col-md-2">
<label>Field2</label>
<p-multiSelect [options]="Field2Options" [(ngModel)]="Field2Model" formControlName="courseName"
defaultLabel="Select a Field" optionLabel="Field2Name">
</p-multiSelect>
<div *ngIf="frm.Field2.invalid && (frm.Field2.dirty || frm.Field2.touched)" class="text-danger">
<div *ngIf="frm.Field2.errors.required">Field2 is required</div>
</div>
</div>
<div class="col-md-2">
<label>Field3 </label>
<p-multiSelect [options]="Field3List" [(ngModel)]="Field3Model" formControlName="Field3"
defaultLabel="Select a status" optionLabel="statusName">
</p-multiSelect>
<div *ngIf="frm.Field3.invalid && (frm.Field3.dirty || frm.Field3.touched)" class="text-danger">
<div *ngIf="frm.Field3.errors.required">Field3 is required</div>
</div>
</div>
<div class="col-md-2">
<div class="row" style="padding-top: 27px;">
<button pButton type="button" label="Search" [disabled]='!myForm.valid'
class="d-inline-block mb-2 pb-1" (click)="SearchFilter()"></button>
</div>
</div>
</div>
It is not working. If I use Validators.required in any of the fields then it shows a message under that control, but I want to use that at least one field should be selected to get the result.
I followed reference Angular2 FormBuilder Validators: require at least one field in a group to be filled but its not working.
What I missed. Thank you in advance.
Related
I've been developing my first project with Vue3 js.I have tried to implement vue-signature pad inside for loop.I thnik vue signature pad is working based on ref. I have done vue-signature pad with out loop. But i dont know how to use ref inside loop. Anybody please help how to implement signature pad inside loop using vue3. Thank you in advance.
<template>
<div
class="row"
v-for="(applicants, index) in applicant_details"
:key="index"
>
<div class="col-sm-4">
<div class="form-group">
<p>Signature for {{ applicants.first_name }}</p>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<VueSignaturePad ref="" />
<button type="button" #click="undo1" class="btn btn-warning">
Undo
</button>
</div>
</div>
<div class="col-sm-2" style="margin-top: 40px; text-align: center">
<div class="form-group">
<button type="button" #click="undo" class="btn btn-danger">
Clear
</button>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<button type="button" #click="save_signature" class="btn btn-success">
Save
</button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
applicant_details: [
{ first_name: 'john', signature: '' },
{ first_name: 'david', signature: '' },
],
};
},
methods: {
undo() {
//will undo the signature
},
save_signature() {
//Save the signature
},
},
};
</script>
Be carefull, you have some issue with your code to begin with.
No template for you html
export default not well formated
List item
You original issue may be in --> v-for="(applicants, index) in 'applicant_details'"
Here it loop on the STRING 'applicant_details'. If you want to loop on a variable in your data juste use applicant_details.
U can also use vite.new/vue to create reproductive code and help us to help you.
Here is the corrected code : https://stackblitz.com/edit/vitejs-vite-9kvde4?file=src%2FApp.vue&terminal=dev
I'm coding a Employee Database in Vuejs using Firebase as my backend. On my new employee page I keep getting a 3 errors when submitting the form to add a new employee.
"Property or method "saveEmployee" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property."
"[Vue warn]: Error in v-on handler: "TypeError: _vm.saveEmployee is not a function"
"TypeError: "_vm.saveEmployee is not a function"
This is how my newemployee.vue file looks like
<template>
<div id="new-employee">
<h3>New Employee</h3>
<div class="row">
<form #submit.prevent="saveEmployee" class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="text" v-model="employee_id" required />
<label>Employee ID#</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="text" v-model="name" required />
<label>Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="text" v-model="dept" required />
<label>Department</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="text" v-model="position" required />
<label>Name</label>
</div>
</div>
<button type="submit" class="btn">Submit</button>
<router-link to="/" class="btn grey">Cancel</router-link>
</form>
</div>
</div>
</template>
<script>
import db from "./firebaseInit";
export default {
name: "new-employee",
data() {
return {
employee_id: null,
name: null,
dept: null,
position: null
};
},
methods: {
saveEmployee() {
db.collection("employees")
.add({
employee_id: this.employee_id,
name: this.name,
dept: this.dept,
position: this.position
})
.then(docRef => {
console.log("Client added: ", docRef.id);
this.$router.push("/");
})
.catch(error => {
console.error("Error adding employee: ", error);
});
}
}
};
</script>
The whole problem is on the saveEmployee function and I can not find a fix.
I'am new in Angular. How can i develop a drop down suggestion search box in angular 2/4. when clicking on search button the details are shown using below codes.But am trying while typing on text box the suggestion details need to show. same like Auto complete (During searching, ‘as-you-type’ suggestion to be displayed.)
component.HTML
<form role="form">
<div class="row">
<div class="form-group">
<div class="input-group">
<input name="search"
class="form-control"
type="text"
placeholder="Search"
required="" [(ngModel)]='searchcontent'>
<span class="input-group-btn">
<button
class="btn btn-success ProductSearchBtn"
type="button"
(click)='FetchItemDetailsSearch(searchcontent)'>
<i class="glyphicon glyphicon-search"
aria-hidden="true"></i>
<span style="margin-left:10px;">Search</span>
</button>
</span>
</div>
</div>
</div>
</form>
</div>
</section>
<section class="CommonsubWhiteBg"
style='height:850px;overflow-y:scroll; overflow-x:hidden'
(scroll)="onScroll($event)">
<ng-container *ngFor="let item of itemdetails;">
<article class="row" style="margin:0px;">
<div class="col-md-12 col-sm-12 col-xs-12 EnquiryMore">
<a [routerLink]="['/productdetails',item.ItemID]">
<h5>{{item.ItemCode + ' - ' + item.ItemDescription}}</h5>
</a>
</div>
</article>
</ng-container>
<ng-container *ngIf="!itemdetails" style="margin:0px;">
<article class="col-md-12">
<h3>Loading data...</h3>
</article>
</ng-container>
<ng-container *ngIf="itemdetails&&itemdetails.length==0"
class="ItemNotfoundArea row" style="margin:0px;">
<article class="col-md-12">
<h1>Sorry</h1>
<p>Item Not Found</p>
</article>
</ng-container>
</section>
component.ts file
FetchItemDetailsSearch(itemcodeordesc: string): void {
this.pageIndex = 1;
this.searchflag = 1;
if (itemcodeordesc.length > 0)
this.searchcontent = itemcodeordesc;
else {
itemcodeordesc = undefined
this.searchcontent = itemcodeordesc;
}
this.prevScrollPosition = 0;
this._enqService
.FetchItemDetailsSearch(this.searchcontent, this.pageIndex)
.subscribe(itemsData => this.itemdetails = itemsData,
error => {
console.error(error);
this.statusMessage =
"Problem with the service.Please try again after sometime";
}
);
}
**Service.ts **
FetchItemDetailsSearch(itemcodeordesc: string, pageIndex: number):
Observable<IEnquiryDetails[]> {
return this._http.get('http://localhost:1234/api/enquirydetails/',
{ params:
{ itemcodeordesc: itemcodeordesc,
pageIndex: pageIndex }
})
.map((response: Response) => <IEnquiryDetails[]>response.json())
.catch(this.handleError)
}
condition: trying only with Angular 4/2 not jQuery
Take a look at angular material auto complete component.
https://material.angular.io/components/autocomplete/examples.
You can also have your own custom filter function. Below sample code would give you a way out to achieve the same.
https://stackblitz.com/angular/krlrmgepmrv?file=app%2Fautocomplete-filter-example.ts
or
Try this
http://www.angulartutorial.net/2017/03/simple-search-using-pipe-in-angular-2.html
Please check this answer
<form role="form">
<div class="row">
<div class="form-group">
<div class="input-group">
<input name="search" class="form-control" type="text" placeholder="Search" (keyup)="FetchItemDetailsSearch(searchcontent)" [(ngModel)]="searchcontent">
<span class="input-group-btn">
<button class="btn btn-success ProductSearchBtn" type="button" (click)='FetchItemDetailsSearch(searchcontent)'><i class="glyphicon glyphicon-search" aria-hidden="true"></i><span style="margin-left:10px;">Search</span></button>
</span>
</div>
</div>
</div>
</form>
You can use auto complete plugin like this .
I'm trying to use ng-blur. Below is my HTML code:
<div ng-if="CurrentStage==='SaveQuery'">
<div class="col-sm-12">
<div class="form-group row">
<label class="col-sm-3 control-label text-right">Query Name</label>
<div class="col-sm-9">
<input type="text" ng-blur="performValidationQueryName()" ng-model="QueryName" ng-class="QueryNameError?'form-control validation_error':'form-control'" placeholder="Query Name" />
<span ng-if="QueryNameErrorMsg!=''" class="errorMsg">{{QueryNameErrorMsg}}</span>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
JavaScript code for blur event call is:
$scope.performValidationQueryName = function () {
if($scope.QueryName != null && $scope.QueryName != '') {}
};
The issue I'm facing is:
When ng-if="CurrentStage==='SaveQuery'" is there inside div, my ng-model="QueryName" is not getting updated. And with blur of the text, I get $scope.QueryName = "" with performValidationQueryName function.
If, I remove ng-if="CurrentStage==='SaveQuery'", all things works perfectly and I get the value inside the $scope.QueryName.
How can I call ng-blur which is placed inside the div with an ng-if condition?
You should use object in your input model will solve your problem because it comes under ng-if as shown below,
Template:
<div ng-if="CurrentStage==='SaveQuery'">
<div class="col-sm-12">
<div class="form-group row">
<label class="col-sm-3 control-label text-right">Query Name</label>
<div class="col-sm-9">
<input type="text" ng-blur="performValidationQueryName(Query.Name)" ng-model="Query.Name" ng-class="QueryNameError?'form-control validation_error':'form-control'" placeholder="Query Name" />
<span ng-if="QueryNameErrorMsg!=''" class="errorMsg">{{QueryNameErrorMsg}}</span>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
Controller:
$scope.performValidationQueryName = function (queryName) {
if (queryName != null && queryName != ''){
//do something..
}
};
I don't know how I look for this or how this method is called, but what I am trying to do is adding items dynamically with a form using AngularJS.
This is all working fine, but how are these items passed to the controller when submitted?
These are snippets from code:
AngularJS part:
angular
.module('Administration', [])
.controller('addParents', ['$scope', function ($scope) {
$scope.parents = [];
$scope.addParent = function () {
$scope.parents.push({
'firstname': $scope.Firstname,
'lastname' : $scope.Lastname,
'done': false
})
$scope.Firstname = ''
$scope.Lastname = ''
}
$scope.deleteParent = function (index) {
$scope.parents.splice(index, 1);
}
}])
The list:
<div role="tablist" aria-multiselectable="true" class="panel-group" id="accordion-1">
<div class="panel panel-default {'fadeOut' : parent.done}" ng-repeat="parent in parents">
<div role="tab" class="panel-heading">
<h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="true" href="#accordion-1 .item-1">{{parent.firstname}}</a> <span class="fa fa-close pull-right" ng-click="deleteParent($index)"></span></h4>
</div>
<div role="tabpanel" class="panel-collapse collapse in item-1">
<div class="panel-body">
<fieldset>
<legend>Personal</legend>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Firstname</label>
<div class="col-sm-10">
<p class="form-control-static">{{parent.firstname}}</p>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Lastname</label>
<div class="col-sm-10">
<p class="form-control-static">{{parent.lastname}}</p>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
As you can see I am using an accordion, it is a personal touch to have a nice layout of added items and to have a nice overview of all items.
Hope you can help me in this issue or give me some usefull links
Thanks!