I would like to be able to submit the following form without the phone field being required.
However, I would still like the phone field to be validated with regex before being able to be submit if a user inputs a phone number value.
So if blank, submit, ELSE check that it's valid before submitting. I thought had worked this out, but apparently not...
Any help is very much appreciated!
const app = Vue.createApp({
data() {
return {
currentYear: new Date().getFullYear(),
now: new Date().toISOString(),
imgSrc:
"",
contact: {
firstName: "",
lastName: "",
email: "",
phone: "",
address: "",
city: "",
state: "",
zip: "",
checked: false,
},
states: [
{
name: "Alabama",
abr: "AL",
},
{
name: "Alaska",
abr: "AK",
},
{
name: "American Samoa",
abr: "AS",
},
{
name: "Arizona",
abr: "AZ",
},
{
name: "Arkansas",
abr: "AR",
},
{
name: "California",
abr: "CA",
},
{
name: "Colorado",
abr: "CO",
},
{
name: "Connecticut",
abr: "CT",
},
{
name: "Delaware",
abr: "DE",
},
{
name: "District Of Columbia",
abr: "DC",
},
{
name: "Federated States Of Micronesia",
abr: "FM",
},
{
name: "Florida",
abr: "FL",
},
{
name: "Georgia",
abr: "GA",
},
{
name: "Guam",
abr: "GU",
},
{
name: "Hawaii",
abr: "HI",
},
{
name: "Idaho",
abr: "ID",
},
{
name: "Illinois",
abr: "IL",
},
{
name: "Indiana",
abr: "IN",
},
{
name: "Iowa",
abr: "IA",
},
{
name: "Kansas",
abr: "KS",
},
{
name: "Kentucky",
abr: "KY",
},
{
name: "Louisiana",
abr: "LA",
},
{
name: "Maine",
abr: "ME",
},
{
name: "Marshall Islands",
abr: "MH",
},
{
name: "Maryland",
abr: "MD",
},
{
name: "Massachusetts",
abr: "MA",
},
{
name: "Michigan",
abr: "MI",
},
{
name: "Minnesota",
abr: "MN",
},
{
name: "Mississippi",
abr: "MS",
},
{
name: "Missouri",
abr: "MO",
},
{
name: "Montana",
abr: "MT",
},
{
name: "Nebraska",
abr: "NE",
},
{
name: "Nevada",
abr: "NV",
},
{
name: "New Hampshire",
abr: "NH",
},
{
name: "New Jersey",
abr: "NJ",
},
{
name: "New Mexico",
abr: "NM",
},
{
name: "New York",
abr: "NY",
},
{
name: "North Carolina",
abr: "NC",
},
{
name: "North Dakota",
abr: "ND",
},
{
name: "Northern Mariana Islands",
abr: "MP",
},
{
name: "Ohio",
abr: "OH",
},
{
name: "Oklahoma",
abr: "OK",
},
{
name: "Oregon",
abr: "OR",
},
{
name: "Palau",
abr: "PW",
},
{
name: "Pennsylvania",
abr: "PA",
},
{
name: "Puerto Rico",
abr: "PR",
},
{
name: "Rhode Island",
abr: "RI",
},
{
name: "South Carolina",
abr: "SC",
},
{
name: "South Dakota",
abr: "SD",
},
{
name: "Tennessee",
abr: "TN",
},
{
name: "Texas",
abr: "TX",
},
{
name: "Utah",
abr: "UT",
},
{
name: "Vermont",
abr: "VT",
},
{
name: "Virgin Islands",
abr: "VI",
},
{
name: "Virginia",
abr: "VA",
},
{
name: "Washington",
abr: "WA",
},
{
name: "West Virginia",
abr: "WV",
},
{
name: "Wisconsin",
abr: "WI",
},
{
name: "Wyoming",
abr: "WY",
},
],
};
},
methods: {
submitForm(e) {
const isValid =
this.contact.firstName &&
this.contact.lastName &&
this.contact.email &&
this.validEmail(this.contact.email) &&
this.validPhone(this.contact.phone) &&
this.validZip(this.contact.zip);
e.target.classList.add("was-validated");
if (!isValid) {
e.preventDefault();
}
},
validEmail: function (email) {
const re =
/^(([^<>()[\]\\.,;:\s#"]+(\.[^<>()[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
},
validPhone: function (phone) {
const re = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
return re.test(phone);
},
validZip: function (zip) {
const re = /^\d{5}(?:[-\s]\d{4})?$/;
return re.test(zip);
},
},
});
app.mount("#awApp");
<!DOCTYPE html>
<html lang="en" class="vh-100">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Bootstrap 5 CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<!-- /Bootstrap 5 CSS-->
<style>
main > .container {
padding: 60px 15px 0;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue#3.0.11"></script>
</head>
<body>
<div id="awApp" class="d-flex flex-column vh-100">
<!-- FIXED NAVBAR AND/OR HEADER -->
<header>
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img :src="imgSrc" alt="logo" width="120" />
</a>
</div>
</nav>
</header>
<!-- / HEADER/NAVBAR -->
<!-- MAIN CONTENT -->
<main role="main" class="flex-shrink-0">
<div class="container">
<div class="row my-5">
<div class="col-md-7">
<img
src="http://placehold.it/1200x400"
alt="hero image"
class="img-fluid"
/>
<h2 class="mt-3">Headline goes here...</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Corporis dolore eaque, facere id molestias perspiciatis sit?
</p>
<ul>
<li>benefit 1</li>
<li>benefit 2</li>
<li>benefit 3</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad
aliquid assumenda consectetur deleniti est ipsam nemo nobis
officiis quasi, quod!
</p>
</div>
<div class="col-md-5">
<div class="card shadow p-3">
<!--<img class="card-img-top rz-card-img-top" src="http://placehold.it/400x100" alt="Card image cap">-->
<div class="card-body">
<h5 class="card-title">Headline</h5>
<p class="card-text">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
<form
novalidate
class="needs-validation"
name="mainForm"
#submit="submitForm"
method="post"
>
<div class="row mb-2">
<div class="col-md-6 mb-3">
<label for="firstname" class="form-label mb-0"
>First Name*</label
>
<input
id="firstname"
type="text"
name="firstname"
class="form-control"
v-model="contact.firstName"
id="awValid"
required
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a first name.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastname" class="form-label mb-0"
>Last Name*</label
>
<input
id="lastname"
type="text"
name="lastname"
class="form-control"
v-model="contact.lastName"
required
/>
<div class="invalid-feedback">
Please enter a last name.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="email" class="form-label mb-0"
>Email Address*</label
>
<input
id="email"
type="text"
name="email"
class="form-control"
v-model="contact.email"
pattern="^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*#[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,20})$"
required
/>
<div class="invalid-feedback">
Please enter a valid email.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="phone" class="form-label mb-0"
>Phone
</label>
<input
id="phone"
type="text"
name="phone"
class="form-control"
pattern="^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$"
v-model="contact.phone"
/>
<div class="invalid-feedback">
Please enter a valid phone number.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="address1" class="form-label mb-0"
>Street Address
</label>
<input
id="address1"
type="text"
name="address1"
class="form-control"
v-model="contact.address"
/>
</div>
</div>
<div class="row mb-2">
<div class="col-md-5 mb-3">
<label for="city" class="form-label mb-0">City</label>
<input
id="city"
type="text"
name="city"
class="form-control"
v-model="contact.city"
/>
</div>
<div class="col-md-3 mb-3">
<label for="state" class="form-label mb-0">State</label>
<select
id="state"
name="state"
v-model="contact.state"
class="form-select"
>
<option>##state##</option>
<option
v-for="state in states"
v-bind:value="state.abr"
>
{{state.name}}
</option>
</select>
</div>
<div class="col-md-4 mb-3">
<label for="zip" class="form-label mb-0"
>Zip Code</label
>
<input
id="zip"
type="text"
name="zip"
class="form-control"
v-model="contact.zip"
pattern="^\d{5}(?:[-\s]\d{4})?$"
/>
<div class="invalid-feedback">
Please enter a valid zip code.
</div>
</div>
</div>
<div class="row mb-2">
<div class="col">
<div class="form-check">
<input
id="checkbox1"
type="checkbox"
class="form-check-input"
name="check-me-out"
v-model="contact.checked"
/>
<label for="checkbox1" class="form-check-label"
>Check me out</label
>
<div></div>
</div>
</div>
</div>
<input
type="submit"
class="btn btn-primary"
value="Submit"
/>
<div>
<small class="form-text text-muted">
<em>* Denotes a required field.</em>
</small>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- /MAIN CONTENT -->
<!-- FOOTER -->
<footer class="footer mt-auto py-3 bg-light text-center">
<div class="container">
<span class="text-muted"
>© {{currentYear}} |
Privacy Policy |
Legal</span
>
</div>
</footer>
<!-- /FOOTER -->
</div>
<!--Bootstrap 5 JS-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<!--/Bootstrap 5 JS-->
</body>
</html>
You could add a condition to the isValid Boolean that checks whether the phone field is empty:
export default {
methods: {
submitForm(e) {
const isValid =
this.contact.firstName &&
this.contact.lastName &&
this.contact.email &&
this.validEmail(this.contact.email) &&
👇
(!this.contact.phone || this.validPhone(this.contact.phone)) &&
this.validZip(this.contact.zip);
//...
}
}
}
const app = Vue.createApp({
data() {
return {
currentYear: new Date().getFullYear(),
now: new Date().toISOString(),
imgSrc:
"",
contact: {
firstName: "",
lastName: "",
email: "",
phone: "",
address: "",
city: "",
state: "",
zip: "",
checked: false,
},
states: [
{
name: "Alabama",
abr: "AL",
},
{
name: "Alaska",
abr: "AK",
},
{
name: "American Samoa",
abr: "AS",
},
{
name: "Arizona",
abr: "AZ",
},
{
name: "Arkansas",
abr: "AR",
},
{
name: "California",
abr: "CA",
},
{
name: "Colorado",
abr: "CO",
},
{
name: "Connecticut",
abr: "CT",
},
{
name: "Delaware",
abr: "DE",
},
{
name: "District Of Columbia",
abr: "DC",
},
{
name: "Federated States Of Micronesia",
abr: "FM",
},
{
name: "Florida",
abr: "FL",
},
{
name: "Georgia",
abr: "GA",
},
{
name: "Guam",
abr: "GU",
},
{
name: "Hawaii",
abr: "HI",
},
{
name: "Idaho",
abr: "ID",
},
{
name: "Illinois",
abr: "IL",
},
{
name: "Indiana",
abr: "IN",
},
{
name: "Iowa",
abr: "IA",
},
{
name: "Kansas",
abr: "KS",
},
{
name: "Kentucky",
abr: "KY",
},
{
name: "Louisiana",
abr: "LA",
},
{
name: "Maine",
abr: "ME",
},
{
name: "Marshall Islands",
abr: "MH",
},
{
name: "Maryland",
abr: "MD",
},
{
name: "Massachusetts",
abr: "MA",
},
{
name: "Michigan",
abr: "MI",
},
{
name: "Minnesota",
abr: "MN",
},
{
name: "Mississippi",
abr: "MS",
},
{
name: "Missouri",
abr: "MO",
},
{
name: "Montana",
abr: "MT",
},
{
name: "Nebraska",
abr: "NE",
},
{
name: "Nevada",
abr: "NV",
},
{
name: "New Hampshire",
abr: "NH",
},
{
name: "New Jersey",
abr: "NJ",
},
{
name: "New Mexico",
abr: "NM",
},
{
name: "New York",
abr: "NY",
},
{
name: "North Carolina",
abr: "NC",
},
{
name: "North Dakota",
abr: "ND",
},
{
name: "Northern Mariana Islands",
abr: "MP",
},
{
name: "Ohio",
abr: "OH",
},
{
name: "Oklahoma",
abr: "OK",
},
{
name: "Oregon",
abr: "OR",
},
{
name: "Palau",
abr: "PW",
},
{
name: "Pennsylvania",
abr: "PA",
},
{
name: "Puerto Rico",
abr: "PR",
},
{
name: "Rhode Island",
abr: "RI",
},
{
name: "South Carolina",
abr: "SC",
},
{
name: "South Dakota",
abr: "SD",
},
{
name: "Tennessee",
abr: "TN",
},
{
name: "Texas",
abr: "TX",
},
{
name: "Utah",
abr: "UT",
},
{
name: "Vermont",
abr: "VT",
},
{
name: "Virgin Islands",
abr: "VI",
},
{
name: "Virginia",
abr: "VA",
},
{
name: "Washington",
abr: "WA",
},
{
name: "West Virginia",
abr: "WV",
},
{
name: "Wisconsin",
abr: "WI",
},
{
name: "Wyoming",
abr: "WY",
},
],
};
},
methods: {
submitForm(e) {
const isValid =
this.contact.firstName &&
this.contact.lastName &&
this.contact.email &&
this.validEmail(this.contact.email) &&
(!this.contact.phone || this.validPhone(this.contact.phone)) &&
this.validZip(this.contact.zip);
e.target.classList.add("was-validated");
if (!isValid) {
e.preventDefault();
}
},
validEmail: function (email) {
const re =
/^(([^<>()[\]\\.,;:\s#"]+(\.[^<>()[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
},
validPhone: function (phone) {
const re = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
return re.test(phone);
},
validZip: function (zip) {
const re = /^\d{5}(?:[-\s]\d{4})?$/;
return re.test(zip);
},
},
});
app.mount("#awApp");
<!DOCTYPE html>
<html lang="en" class="vh-100">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Bootstrap 5 CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<!-- /Bootstrap 5 CSS-->
<style>
main > .container {
padding: 60px 15px 0;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue#3.0.11"></script>
</head>
<body>
<div id="awApp" class="d-flex flex-column vh-100">
<!-- FIXED NAVBAR AND/OR HEADER -->
<header>
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img :src="imgSrc" alt="logo" width="120" />
</a>
</div>
</nav>
</header>
<!-- / HEADER/NAVBAR -->
<!-- MAIN CONTENT -->
<main role="main" class="flex-shrink-0">
<div class="container">
<div class="row my-5">
<div class="col-md-7">
<img
src="http://placehold.it/1200x400"
alt="hero image"
class="img-fluid"
/>
<h2 class="mt-3">Headline goes here...</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Corporis dolore eaque, facere id molestias perspiciatis sit?
</p>
<ul>
<li>benefit 1</li>
<li>benefit 2</li>
<li>benefit 3</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad
aliquid assumenda consectetur deleniti est ipsam nemo nobis
officiis quasi, quod!
</p>
</div>
<div class="col-md-5">
<div class="card shadow p-3">
<!--<img class="card-img-top rz-card-img-top" src="http://placehold.it/400x100" alt="Card image cap">-->
<div class="card-body">
<h5 class="card-title">Headline</h5>
<p class="card-text">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
<form
novalidate
class="needs-validation"
name="mainForm"
#submit="submitForm"
method="post"
>
<div class="row mb-2">
<div class="col-md-6 mb-3">
<label for="firstname" class="form-label mb-0"
>First Name*</label
>
<input
id="firstname"
type="text"
name="firstname"
class="form-control"
v-model="contact.firstName"
id="awValid"
required
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a first name.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastname" class="form-label mb-0"
>Last Name*</label
>
<input
id="lastname"
type="text"
name="lastname"
class="form-control"
v-model="contact.lastName"
required
/>
<div class="invalid-feedback">
Please enter a last name.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="email" class="form-label mb-0"
>Email Address*</label
>
<input
id="email"
type="text"
name="email"
class="form-control"
v-model="contact.email"
pattern="^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*#[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,20})$"
required
/>
<div class="invalid-feedback">
Please enter a valid email.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="phone" class="form-label mb-0"
>Phone
</label>
<input
id="phone"
type="text"
name="phone"
class="form-control"
pattern="^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$"
v-model="contact.phone"
/>
<div class="invalid-feedback">
Please enter a valid phone number.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="address1" class="form-label mb-0"
>Street Address
</label>
<input
id="address1"
type="text"
name="address1"
class="form-control"
v-model="contact.address"
/>
</div>
</div>
<div class="row mb-2">
<div class="col-md-5 mb-3">
<label for="city" class="form-label mb-0">City</label>
<input
id="city"
type="text"
name="city"
class="form-control"
v-model="contact.city"
/>
</div>
<div class="col-md-3 mb-3">
<label for="state" class="form-label mb-0">State</label>
<select
id="state"
name="state"
v-model="contact.state"
class="form-select"
>
<option>##state##</option>
<option
v-for="state in states"
v-bind:value="state.abr"
>
{{state.name}}
</option>
</select>
</div>
<div class="col-md-4 mb-3">
<label for="zip" class="form-label mb-0"
>Zip Code</label
>
<input
id="zip"
type="text"
name="zip"
class="form-control"
v-model="contact.zip"
pattern="^\d{5}(?:[-\s]\d{4})?$"
/>
<div class="invalid-feedback">
Please enter a valid zip code.
</div>
</div>
</div>
<div class="row mb-2">
<div class="col">
<div class="form-check">
<input
id="checkbox1"
type="checkbox"
class="form-check-input"
name="check-me-out"
v-model="contact.checked"
/>
<label for="checkbox1" class="form-check-label"
>Check me out</label
>
<div></div>
</div>
</div>
</div>
<input
type="submit"
class="btn btn-primary"
value="Submit"
/>
<div>
<small class="form-text text-muted">
<em>* Denotes a required field.</em>
</small>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- /MAIN CONTENT -->
<!-- FOOTER -->
<footer class="footer mt-auto py-3 bg-light text-center">
<div class="container">
<span class="text-muted"
>© {{currentYear}} |
Privacy Policy |
Legal</span
>
</div>
</footer>
<!-- /FOOTER -->
</div>
<!--Bootstrap 5 JS-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<!--/Bootstrap 5 JS-->
</body>
</html>
I am new to angular 4. I am working in pagination using angular 4.I ahve installed "npm install ngx-pagination --save". I followed the instruction which was in internet. But I am getting error like "The pipe 'paginate' could not be found ("
]game of games | paginate: { itemsPerPage: 2, currentPage: p }">
{{i}}
"): ng:///ActivityChartModule/ActivityComponent.html#235:32
'pagination-controls' is not a known element:". I tried More. Can any one help me to comeout from this problem. Below are my code,
app.module.ts
import {NgxPaginationModule} from 'ngx-pagination';
imports: [NgxPaginationModule]
in component.ts
p: number = 1;
games = [
{
"id": "1",
"name": "DOTA 2",
"genre": "Strategy"
},
{
"id": "2",
"name": "AOE 3",
"genre": "Strategy"
},
{
"id": "3",
"name": "GTA 5",
"genre": "RPG"
},
{
"id": "4",
"name": "Far Cry 3",
"genre": "Action"
},
{
"id": "5",
"name": "GTA San Andreas",
"genre": "RPG"
},
{
"id": "6",
"name": "Hitman",
"genre": "Action"
},
{
"id": "7",
"name": "NFS MW",
"genre": "Sport"
}, {
"id": "8",
"name": "Fifa 16",
"genre": "Sport"
}, {
"id": "9",
"name": "NFS Sen 2",
"genre": "Sport"
}, {
"id": "10",
"name": "Witcher Assasins on King",
"genre": "Adventure"
}
];
in component.html
<div class="container">
<div class="row">
<nav class="navbar">
<input class="form-control" type="text" name="search">
</nav>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Genre</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let game of games | paginate: { itemsPerPage: 2, currentPage: p }">
<td>{{i}}</td>
<td>{{game.name}}</td>
<td>{{game.genre}}</td>
</tr>
</tbody>
</table>
<div>
<pagination-controls (pageChange)="p($event)"></pagination-controls>
</div>
</div>
</div>
If you have already import NgxPaginationModule into app.module.ts, I think it is because you need to restart your project after npm install.
Try ctrl+c and ng serve to restart it again.
I resolved this problem, you need to include in your module.ts following code:
import {NgxPaginationModule} from 'ngx-pagination';
#NgModule({
imports: [ NgxPaginationModule ]
})
You should add CUSTOM_ELEMENTS_SCHEMA in angular-core
and
schemas: [ CUSTOM_ELEMENTS_SCHEMA ] ----add it in your #NgModule({})
refer this link: https://hassantariqblog.wordpress.com/2016/10/12/angular2-template-parse-errors-add-custom_elements_schema-to-the-ngmodule-schemas/
I copied your code and did not face the error you faced. However, the variable p used is actually an event and not a number[].
Replace the table and pagination-control element as per below in app.component.html:
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Genre</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let game of games | paginate: { itemsPerPage: 2, currentPage: p }">
<td>{{game.id}}</td>
<td>{{game.name}}</td>
<td>{{game.genre}}</td>
</tr>
</tbody>
</table>
<div>
<pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>
Also, declaring p within app.component.ts isn't required as its the paginationApi that gets used internally.
Side note: The error you are getting suggests that the ngx-pagination is not installed successfully. Please check if you have the ngx-pagination folder copied within your project's node_modules folder successfully.
Demo: https://angular-ijtgcv.stackblitz.io
Try changing the order of "import {NgxPaginationModule} from 'ngx-pagination';"
in app.module.ts
It works out for me
after importing NgxPaginationModule to app.module.ts and stop the local server 'npm update' worked for me !
I am working on Ionic Material and I want 2 images in a row like Ionic material Demo app.It is showing only 1 now in a row. I created a https://codepen.io/anujsphinx/pen/jVqvaV
From It,So Need Help to fix this issue.
Now That issue has fixed and image is showing but main issue is tomaintain size,check updated pen on same url.
Look at this solution:
/*global angular*/
angular.module('ionicApp', ['ionic', 'ionic-material', 'ionMdInput'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('eventmenu', {
url: '/event',
abstract: true,
templateUrl: 'templates/event-menu.html'
})
.state('eventmenu.login', {
url: '/login',
views: {
'menuContent' :{
templateUrl: 'templates/login.html',
controller: 'GalleryCtrl'
}
}
});
$urlRouterProvider.otherwise('/event/login');
})
.directive('ngLastRepeat', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngLastRepeat'+ (attr.ngLastRepeat ? '.'+attr.ngLastRepeat : ''));
});
}
}
}
})
.controller('MainCtrl', function($scope, ionicMaterialInk, ionicMaterialMotion, $ionicSideMenuDelegate, $timeout) {
$timeout(function(){
ionicMaterialInk.displayEffect();
ionicMaterialMotion.ripple();
},0);
})
.controller('GalleryCtrl', function($scope, $stateParams, $timeout, ionicMaterialInk, ionicMaterialMotion) {
console.log("in GalleryCtrl");
// Activate ink for controller
//ionicMaterialInk.displayEffect();
$scope.myPics= [{
"Title": "My Childhood",
"Like": "21",
"Comment" : "5",
"Image" : "http://www.magic4walls.com/wp-content/uploads/2013/12/lovely-child-blue-eyes-photo-wallpaper-2560x1600-1-694x417.jpg"
},{
"Title": "Funny me",
"Like": "21",
"Comment" : "5",
"Image" : "http://media.salemwebnetwork.com/cms/CW/family/2218-ChildLookUp.220w.tn.jpg"
},{
"Title": "Me",
"Like": "21",
"Comment" : "5",
"Image" : "http://1.bp.blogspot.com/-QDe-qthaKz0/UAWZ6aakdoI/AAAAAAAAFK4/2zlaIu1r20Q/s1600/baby.jpg"
},{
"Title": "Guitar",
"Like": "21",
"Comment" : "5",
"Image" : "http://imshopping.rediff.com/imgshop/800-1280/shopping/pixs/17369/c/caihd224_1._craft-art-india-handmade-dummy-miniature-of-guitar-gitar-code-cai-hd-0224-.jpg"
}];
$scope.$on('ngLastRepeat.mylist',function(e) {
console.log("in Last ");
ionicMaterialInk.displayEffect();
});
});
/*endglobal angular*/
/* General
==================================*/
h1 {
color: #fff;
text-shadow: 0 1px 0px #000;
font-size: 42px;
}
/* Utilities
==================================*/
.title-bordered {
border-top: solid 2px #bbb;
padding-top: 30px;
}
p {
color: #555;
margin: 0 0 25px;
}
.scroll {
height: 100%;
}
/* Menu
==================================*/
.menu .bar.bar-header.expanded {
transition: all .5s ease-in-out;
}
.menu-open .bar.bar-header.expanded {
background-color: #222;
}
.menu h2 {
bottom: 0;
font-size: 18px;
left: 16px;
position: absolute;
}
.menu .avatar {
height: 88px;
width: 88px;
}
.menu.menu-left * {
font-weight: bold;
}
.menu-open .ion-navicon {
transform: rotate(-360deg);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.menu-open .ion-navicon:before {
content: "\f2ca";
}
/* Login
==================================*/
.app-icon {
background-color: #fff;
background: url('../img/login.PNG') center;
background-size: cover;
border-radius: 50%;
height: 125px;
margin: 0 auto;
width: 125px;
}
.social-login {
position: fixed;
bottom: 0;
}
.error{
padding: 4px 1px;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 12px;
text-transform: uppercase;
color: #000000;
vertical-align: middle;
}
.red_bg{
color:red;
}
.yellow_bg{
background-color: #eae07f!important;
}
.gallery-box .card.card-gallery img {
border: none;
box-shadow: none;
display: block;
max-width: 220px;
max-height: 132px;
width: 100%;
height: 100%;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Material </title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<link href='https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic' rel='stylesheet' type='text/css'>
<link href="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/demo/www/lib/ion-md-input/css/ion-md-input.min.css" rel="stylesheet">
<link href="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/dist/ionic.material.min.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/dist/ionic.material.min.js"></script>
<script src="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/demo/www/lib/ion-md-input/js/ion-md-input.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-nav-view>
</ion-nav-view>
<script id="templates/event-menu.html" type="text/ng-template">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-balanced">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
<ion-content>
<ul class="list animate-rip">
<!-- Note each link has the 'menu-close' attribute so the menu auto closes when clicking on one of these links -->
<a href="#/event/login" class="item" menu-close>Gallery</a>
</ul>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="templates/login.html" type="text/ng-template">
<ion-view view-title="Gallery" class="gallery-box">
<ion-content ng-class="{expanded:isExpanded}" class="animate-fade-slide-in">
<div class="list col" >
<div class="item card card-gallery item-text-wrap in demo" ng-repeat="picsItem in myPics" >
<div class="ink dark-bg">
<h2>{{picsItem.Title}}</h2>
<img ng-src="{{picsItem.Image}}" class="full-image" ng-last-repeat="mylist">
</div>
<div class="item tabs tabs-secondary tabs-icon-left in demo">
<a class="tab-item stable-bg assertive">
<i class="icon ion-heart"></i>
{{picsItem.Like}}
</a>
<a class="tab-item stable-bg positive-900">
<i class="icon ion-chatbubbles"></i>
{{picsItem.Comment}}
</a>
</div>
</div>
</div>
</ion-content>
</ion-view>
</script>
</body>
</html>
I have updated my code pen codepen.io/anujsphinx/pen/jVqvaV
I used col50 and some css then i fixed it .
My question refers specifically to http://api.jquery.com/event.target/#example-1
If you use a span in the <li> or other tag to change the style such as <b> as I have done here, that part of the element won't trigger the JQuery function to toggle it's children. How might one go about making this work?
HTML:
<ul>
<li><b>This doesn't work,</b> this does
<ul>
<li>sub item 1-a</li>
<li>sub item 1-b</li>
</ul>
</li>
<li>item 2
<ul>
<li>sub item 2-a</li>
<li>sub item 2-b</li>
</ul>
</li>
</ul>
JavaScript:
function handler(event) {
var $target = $(event.target);
if( $target.is("li") ) {
$target.children("ul").toggle();
}
}
$("ul").click(handler).find("ul").hide();
To keep using your current form, I'd suggest using closest():
function handler(event) {
$(event.target).closest('li').children("ul").toggle();
}
$("ul").click(handler).find("ul").hide();
JS Fiddle demo.
Though for my own use I'd prefer:
$('li').on('click', function(e){
e.stopPropagation();
$(this).find('ul').toggle();
});
JS Fiddle demo.
References:
closest().
on().
A complete example of e.target children and closest with datatable and external data.
HtML
<!DOCTYPE html>
<html lang="en">
<head>
<title>example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8" src="js/jquery.dataTables.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="col-md-12 sectionone">
<div id="coxtable">
<div class="col-md-3 outerblock" id="section1"><div class="blocks section1"><h6 class="span1">Section1</h6><span class="span1a">Section1a</span></div></div>
<div class="col-md-3 outerblock" id="section2"><div class="blocks section2"><h6 class="span1">Section2</h6><span class="span1a">Section2a</span></div></div>
<div class="col-md-3 outerblock" id="section3"><div class="blocks section3"><h6 class="span1">Section3</h6><span class="span1a">Section3a</span></div></div>
<div class="col-md-3 outerblock" id="section4"><div class="blocks section4"><h6 class="span1">Section4</h6><span class="span1a">Section4a</span></div></div>
</div>
</div>
<div class="sectiontwo col-md-12">
<table id="example">
<thead>
<tr>
<th>name</th>
<th>stargazerscount</th>
<th>forkscount</th>
<th>description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="testmodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="modalbtn btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Javascript
$(document).ready( function () {
var tables=$('#example').DataTable( {
"ajax": {
"type" : "POST",
"url": "http://localhost/example/json/members.json",
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
'name': json[i].name,
'stargazerscount' : json[i].stargazerscount,
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
$('.overlay').hide();
$(".loader").hide();
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
]
});
/*onclick filter*/
$(".outerblock").click(function(e){
$("#testmodal").modal('show');
var item=$(e.target).closest('span').text();
$( ".modalbtn" ).one( "click", function(event) {
$(this).off(event);
alert(item)
var tables=$('#example').DataTable( {
"destroy":true,
"ajax": {
"type" : "POST",
"url": "http://localhost/example/json/members.json?id="+item,
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
'name': json[i].name,
'stargazerscount' : json[i].stargazerscount,
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
$('.overlay').hide();
$(".loader").hide();
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
]
});
});
});
$("#example").delegate("tbody tr td:first-child", "click", function(e){
var item=$(e.target).text();
//alert(item);
$("#testmodal").modal('show');
$( ".modalbtn" ).one( "click", function(event) {
$(this).off(event);
alert(item);
var tables=$('#example').DataTable( {
"destroy":true,
"ajax": {
"type" : "POST",
"url": "http://localhost/example/json/members.json?id="+item,
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
'name': json[i].name,
'stargazerscount' : json[i].stargazerscount,
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
$('.overlay').hide();
$(".loader").hide();
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
]
});
});
});
});
json
[{
"name": "mango",
"stargazerscount": 526,
"forkscount": "critical",
"description": "fruits"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
}
]