I started to write Angular 2 application. I use there angular2 schema forms. It generates me bootstrap-like form well, however I'm not able to style it in any manner.
Component where I use schema forms body
import {Component, Input, OnInit} from '#angular/core';
import { HttpClient } from '../../shared/HttpClient.service';
#Component({
selector: 'stylists-section',
templateUrl: './stylists-section.component.html',
styleUrls: ['./stylists-section.component.scss'],
})
export class StylistsSectionComponent implements OnInit{
#Input() quantity: number;
#Input() col: string;
#Input() query: string;
#Input() title: string;
constructor(private http: HttpClient) {}
ngOnInit() {
this.http.get('data/Users', {'isStylist': true})
.subscribe(response => {
this.stylists = response;
}, err => {
console.error('our error: ', err);
})
}
I tried to style it through this scss file. What I do wrong?
Related
I am playing around with Ionic and would like to make an API call to a REST API that I wrote in ASP .NET Core. Now I know the API works 100% as I am able to use Postman to call it and it works without issue.
However when I try to call the API from Ionic using the native http client I am getting a weird error. The catch of the promise is being triggered but there is no error. The code I am using is as follows:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '#angular/forms';
import { HTTP } from '#ionic-native/http';
#Component({
selector: 'page-home',
templateUrl: 'home.html',
providers: [HTTP]
})
export class HomePage {
credentialsForm: FormGroup;
constructor(public navCtrl: NavController,
private formBuilder: FormBuilder,
private http: HTTP) {
this.credentialsForm = this.formBuilder.group({
email: ['', Validators.required],
password: ['', Validators.required]
});
}
onLogin() {
let endpoint = "https://api.mywebsite.mytld/api/vi/";
var data = {
"emailAddress": this.credentialsForm.controls['email'].value,
"password": this.credentialsForm.controls['password'].value
}
this.http.post('https://api.mywebsite.mytld/api/vi/token', JSON.stringify(data), {headers : {'Content-Type' : 'application/json'}})
.then(data => {
console.log('Success');
})
.catch(error => {
console.log('Failure');
console.log(error.status);
console.log(error.error); // error message as string
console.log(error.headers);
});
}
}
The output I am getting in the console is the following:
[app-scripts] [12:57:50] console.log: Failure
[app-scripts] [12:57:50] console.log: null
[app-scripts] [12:57:50] console.log: null
[app-scripts] [12:57:50] console.log: null
Do you possibly have any idea why this is happening?
I have created an interface for login and getting and error when I am trying to compile it
error :Type 'FormGroup' is not assignable to type 'IAuth'. Property 'email' is missing in type 'FormGroup'
auth.ts
export interface IAuth{
email : String;
password : String;
}
login.component.ts
import { HomePage } from './../home/home';
import { FormBuilder, FormGroup, Validators, FormControl } from '#angular/forms';
import { Component } from '#angular/core';
import { IAuth } from '../../models/auth';
#Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
userAuth : IAuth;
constructor ( private formBuilder : FormBuilder)
{
this.userAuth = formBuilder.group({
email : new FormControl('',Validators.required),
password : new FormControl('',Validators.required)
});
}
}
I'm having a hard time trying to set a max value using the data driven approach in Angular2.
I want to set the max value of the input to a property called userLimit, which I get from firebase. This is my code:
component.ts
import { Component, OnInit, AfterViewInit } from '#angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from "#angular/forms";
import { FiredbService } from '../services/firedb.service';
import { AuthService } from '../services/auth.service';
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
#Component({
selector: 'my-dashboard',
styleUrls: ['./recibirpago.component.scss'],
templateUrl: './recibirpago.component.html'
})
export class RecibirpagoComponent implements OnInit, AfterViewInit {
myForm2: FormGroup;
uid: string;
userLimit: any;
constructor(private fb: FormBuilder,
private dbfr: FiredbService,
private db: AngularFireDatabase,
private authService: AuthService) {
this.myForm2 = this.fb.group({
email: ['', Validators.email],
clpmount: ['', [Validators.required, Validators.max(this.userLimit)]]
});
}
ngOnInit() {
this.uid = this.authService.getUserUid();
}
ngAfterViewInit() {
this.dbfr.getUserLimit(this.uid).subscribe(snapshot => {
this.userLimit = snapshot.val().accountLimit;
console.log(this.userLimit);
})
}
If I write, for example, Validators.max(5000) it works, but if I try to get the data from Firebase it doesn't work.
Thanks for your help!
The problem is that the constructor is executing before the ngAfterViewInit so you don't have the value of the userLimit at that point.
Instead use the setVAlidators method within the subscribe where you get the data.
Something like this:
constructor
this.myForm2 = this.fb.group({
email: ['', Validators.email],
clpmount: ['', Validators.required] // <-- not here
});
ngAfterViewInit
ngAfterViewInit() {
this.dbfr.getUserLimit(this.uid).subscribe(snapshot => {
this.userLimit = snapshot.val().accountLimit;
console.log(this.userLimit);
const clpControl = this.myForm2.get(`clpmount');
clpControl.setValidators(Validators.max(this.userLimit)); // <-- HERE
clpControl.updateValueAndValidity();
})
}
NOTE: Syntax was not checked.
Hi i´m new in ionic and I am trying to pass the scann information form one page to another, the thing its that when I execute the program I have a console.log to check if the info its passed correctly but on chrome console said undefined, letme paste my code:
home.ts where i try to send the info from the scan:
import { Component } from '#angular/core';
import { NavController,Platform } from 'ionic-angular';
import { BarcodeScanner } from '#ionic-native/barcode-scanner';
import { TabsPage } from '../tabs/tabs';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
private barcodeText:String;
private barcodeFormat:String;
private platform:Platform;
private navController:NavController;
constructor(private barcodeScanner: BarcodeScanner,public navCtrl: NavController,platform:Platform) {
this.platform = platform;
this.navController = navCtrl;
}
doScan(){
console.log('scannig product barcode');
this.platform.ready().then(() => {
this.barcodeScanner.scan().then((result) => {
if (!result.cancelled) {
this.barcodeText = result.text;
this.scanningDone(this.barcodeText)
}
}, (error) => {
console.log('error when scanning product barcode');
});
});
}
scanningDone(data){
this.navController.push(TabsPage,{
data:data
});
}
main.ts where the info suppose to go:
import { Component } from '#angular/core';
import { NavController, NavParams , ToastController} from 'ionic-angular';
import { BarcodeScanner } from '#ionic-native/barcode-scanner';
import { DetailsPage } from '../details/details';
import { Http } from '#angular/http'
#Component({
selector: 'main',
templateUrl: 'main.html'
})
export class MainPage {
information: any[];
item:any;
private bcData;
constructor(public navCtrl: NavController, private http: Http,public params:NavParams) {
this.bcData = params.get('data');
console.log(params.get('data'));
let localData = http.get(this.bcData).map(res => res.json().items);
localData.subscribe(data => {
this.information = data;
})
}
on the console.log(params.get('data')); its where I get the undefinied on the console.
you could have a method in your TabsPage that handles opening and closing pages like this:
openPages(Page, Data){
this.navCtrl.push(Page,Data);
}
Then in your scanningDone Method:
scanningDone(data){
this.tabsPage.openPages(MainPage,{
data:data
});
}
How about using localStorage
look at this as well
I have an email input and I want to create a validator to check, through an API, if the entered email it's already in the database.
So, I have:
A validator directive
import { Directive, forwardRef } from '#angular/core';
import { Http } from '#angular/http';
import { NG_ASYNC_VALIDATORS, FormControl } from '#angular/forms';
export function validateExistentEmailFactory(http: Http) {
return (c: FormControl) => {
return new Promise((resolve, reject) => {
let observable: any = http.get('/api/check?email=' + c.value).map((response) => {
return response.json().account_exists;
});
observable.subscribe(exist => {
if (exist) {
resolve({ existentEmail: true });
} else {
resolve(null);
}
});
});
};
}
#Directive({
selector: '[validateExistentEmail][ngModel],[validateExistentEmail][formControl]',
providers: [
Http,
{ provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => ExistentEmailValidator), multi: true },
],
})
export class ExistentEmailValidator {
private validator: Function;
constructor(
private http: Http
) {
this.validator = validateExistentEmailFactory(http);
}
public validate(c: FormControl) {
return this.validator(c);
}
}
A component
import { Component } from '#angular/core';
import { FormGroup, FormBuilder, Validators } from '#angular/forms';
import { ExistentEmailValidator } from '../../directives/existent-email-validator';
#Component({
selector: 'user-account',
template: require<string>('./user-account.component.html'),
})
export class UserAccountComponent {
private registrationForm: FormGroup;
private registrationFormBuilder: FormBuilder;
private existentEmailValidator: ExistentEmailValidator;
constructor(
registrationFormBuilder: FormBuilder,
existentEmailValidator: ExistentEmailValidator
) {
this.registrationFormBuilder = registrationFormBuilder;
this.existentEmailValidator = existentEmailValidator;
this.initRegistrationForm();
}
private initRegistrationForm() {
this.registrationForm = this.registrationFormBuilder.group({
email: ['', [this.existentEmailValidator]],
});
}
}
And a template
<form novalidate [formGroup]="registrationForm">
<input type="text" [formControl]="registrationForm.controls.email" name="registration_email" />
</form>
A've made other validator this way (without the async part) and works well. I think te problem it's related with the promise. I'm pretty sure the code inside observable.subscribe it's running fine.
What am I missing?
I'm using angular v2.1
Pretty sure your problem is this line:
...
email: ['', [this.existentEmailValidator]],
...
You're passing your async validator to the synchronous validators array, I think the way it should be is this:
...
email: ['', [], [this.existentEmailValidator]],
...
It would probably be more obvious if you'd use the new FormGroup(...) syntax instead of FormBuilder.