I have a material initiated by the navigation component if it matters, but the issue is I'm doing a login with the dialog and it does not seem to close when the login is successful and user is redirected to dashboard.html
import { Component, OnInit } from '#angular/core';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import { AngularFireAuth } from "#angular/fire/auth";
import { AuthService } from "../../core/services/auth.service";
import { User, PrivateUser } from "../../core/models/user";
import { UserService } from "../../core/services/user.service";
import { MatDialog, MatDialogRef } from '#angular/material/dialog';
import { SignUpComponent } from '../../components/authentication/sign-up/sign-up.component';
import { SignInComponent } from '../../components/authentication/sign-in/sign-in.component';
#Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
isLoggedIn$: Observable<boolean>;
isLoggedOut$: Observable<boolean>;
user$: Observable<any>;
constructor(
public afAuth: AngularFireAuth,
private authService: AuthService,
private userService: UserService,
public dialog: MatDialog,
public dialogRef: MatDialogRef<SignInComponent>
) { }
ngOnInit() {
this.dialogRef.close();
this.isLoggedIn$ = this.afAuth.authState.pipe(map(user => !!user));
this.isLoggedOut$ = this.isLoggedIn$.pipe(map(loggedIn => !loggedIn));
this.user$ = this.authService.user$;
}
here is my code in dashboard.ts
So it should trigger closing the dialog the moment it reaches the component page. but it's not closing the dialog and the dashboard couldn't be displayed. I'm not getting any console error as well so I'm not too sure what went wrong.
I've also tried calling this.dialog.closeAll; where it loads the dashboard but the dialog is still not being closed.
and this was where the SignInComponent was triggered
loginModal() {
this.dialog.open(SignInComponent)
};
}
on my html
<form [formGroup]="loginForm" (ngSubmit)="SignIn(email.value, password.value)">
<mat-form-field>
<input formControlName="email" name="email" matInput type="text" placeholder="email">
</mat-form-field>
<mat-form-field>
<input formControlName="password" name="password" matInput type="password" placeholder="Password">
</mat-form-field>
<div *ngIf="errorCode" class="notification is-danger">
Email and password does not match
</div>
<div class="d-flex flex-column align-items-center">
<button mat-raised-button class="button is-success w-100" type="submit" [disabled]="!loginForm.valid">
Continue
</button>
</div>
</form>
Add mat-dialog-close to your close button.
<mat-dialog-actions>
<button mat-button mat-dialog-close>No</button>
<!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. -->
<button mat-button [mat-dialog-close]="true">Yes</button>
</mat-dialog-actions>
Related
I am trying to create a login form that will send the username, password details to chilld component and display in its labels. But i dont see it is displaying the user details. I have recently started learnig lwc. Could someone help me to understad the mistake am making here. Thanks for the reply.
Parent.html:
`
<lightning-layout>
<lightning-layout-item>
<div>
<lightning-input type="text" name="Username" label="Username"></lightning-input>
</div>
<div>
<lightning-input type="text" name="Passowrd" label="Password"></lightning-input>
</div>
<div>
<lightning-button variant="brand" label="Submit" title="Primary action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
</div>
<template if:true={buttonClicked}>
<c-sample-click onshowuserdetails={handleClick}></c-sample-click>
</template>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
`
Parent.js
import { LightningElement ,api} from 'lwc';
export default class SampleDemo extends LightningElement {
buttonClicked = false;
#api username = '';
#api password = '';
handleUsername(event)
{
this.username = this.event.value;
}
handlePassword(event)
{
this.password= this.event.value;
}
handleClick(event){
this.buttonClicked =true;
//console.log(this.template.querySelector('lightning-input/'))
this.template.querySelector('c-sample-click').showUserDetails(this.username, this.password)
}
}
Child.html:
<template>
<div>You have entered {user} , {pass}}</div>
</template>
Child.js
import {
LightningElement,
api
} from 'lwc';
export default class SampleClick extends LightningElement {
#api user;
#api pass;
#api
showUserDetails(user, pass) {
this.user = user;
this.pass = pass
}
}
I tried changing some fuction parameters but the exception still exist
I have React application in which I am using Redux to manage application state. There are mutltiple reducers which is custom created and I have forms too in my application. To maintain form state I have used redux-form library and its working fine but whenever I submit the form and move to next route, the state for previous route form gets removed from redux form property.
store.js
import { createStore, combineReducers } from "redux";
import { reducer as formReducer } from 'redux-form'
import { CountHandler, ProgressbarHandler } from "./reducers/Reducer";
const RootStore = combineReducers({
form: formReducer,
Counter:CountHandler,
Progress: ProgressbarHandler,
})
const store = createStore(RootStore)
export default store;
Route1.js
import {React, useState} from 'react'
import { TitleOptions } from '../../data/title'
import Button from '../../components/form-feilds/button/Button'
import Dropdown from '../../components/form-feilds/dropdown/Dropdown'
import Input from '../../components/form-feilds/input/Input';
import { Field, reduxForm } from 'redux-form';
import ApplicantPreview from './ApplicantPreview';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router';
import { Link } from 'react-router-dom';
function ApplicantForm(props) {
let formProperties = {
lblTitle: "Your title",
lblFirstName: "Enter your first name",
lblLastName: "Enter your last name",
submitButtonText: "Next",
dropdownOptions: TitleOptions
}
let isBack = useSelector((state) => state.BackJourney)
let navigate = useNavigate();
return (
<div className="container bupa-container page-form-wrapper">
<form onSubmit={props.handleSubmit((data) => navigate('/quote-cover-for'))}>
<div className="row">
<div className="col-7 col-sm-12 col-lg-2 grid-cust-pad">
<Field name="ApplicantTitle" inputProps={{dropdownLabelClass: 'input-label', dropdownLabel:formProperties.lblTitle, dropdownFieldClass:'form-control', options:formProperties.dropdownOptions}} component={Dropdown} />
</div>
<div className="col-12 col-sm-12 col-lg-5 grid-cust-pad">
<Field name="ApplicantFirstName" value="Test" inputProps={{inputLabel:formProperties.lblFirstName, inputLabelClass:'input-label', inputFieldType:'text', inputFieldClass:'form-control'}} component={Input} />
</div>
<div className="col-12 col-sm-12 col-lg-5 grid-cust-pad">
<Field name="ApplicantLastName" inputProps={{inputLabel:formProperties.lblFirstName, inputLabelClass:'input-label', inputFieldType:'text', inputFieldClass:'form-control'}} component={Input} />
</div>
<div className="col-12 text-center">
<Button buttonType="submit" buttonText={formProperties.submitButtonText} buttonClass="btn btn-primary btn-chevron-next mt-30" />
</div>
</div>
</form>
</div>
)
}
export default reduxForm({
form:'applicantForm'
})(ApplicantForm)
Route2.js
import React, {useState} from 'react';
import { CoverForOptions } from '../../data/CoverFor';
import Button from '../../components/form-feilds/button/Button';
import Dropdown from '../../components/form-feilds/dropdown/Dropdown';
import Counter from '../../components/form-feilds/counter/Counter';
import { Field, reduxForm } from 'redux-form';
function CoverSelectForm(props) {
let formProperties = {
lblTitle: "Select Rider",
submitButtonText: "Next",
backButtonText: "Back",
options: CoverForOptions
}
return (
<div className="page-form-wrapper">
<form>
<div className="row">
<div className="col-12">
<Field name="CoverType" inputProps={{dropdownLabelClass:"input-label", dropdownLabel:formProperties.lblTitle, dropdownFieldClass:"form-control", options:formProperties.options}} component={Dropdown} />
</div>
<div
className="col-12 text-center">
<button type="button" className="btn btn-link btn-chevron-prev mt-30" onClick={GoBack}>Back</button>
<Button buttonType="submit" buttonText={formProperties.submitButtonText} buttonClass="btn btn-primary btn-chevron-next mt-30" />
</div>
</div>
</form>
</div>
)
}
export default reduxForm({
form:'coverSelectForm'
})(CoverSelectForm)
I was using the following code in restful API with ionic 3 for an app am building. It was working properly and then started showing Run time Error Cannot read property 'username' of undefined.
These are the codes I wrote for the app.
this is my auth-service.ts
import { Injectable } from '#angular/core';
import { Http, Headers } from '#angular/http';
import 'rxjs/add/operator/map';
let apiUrl ='http://localhost/PHP-Slim-Restful/api/';
/*
Generated class for the AuthServiceProvider provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular DI.
*/
#Injectable()
export class AuthServiceProvider {
constructor(public http: Http) {
console.log('Hello AuthServiceProvider Provider');
}
postData(credentials, type) {
return new Promise((resolve, reject) => {
let headers = new Headers();
this.http.post(apiUrl + type, JSON.stringify(credentials), {headers: headers})
.subscribe(res => {
resolve(res.text());
}, (err) => {
reject(err);
});
});
};
}
and my signup .ts
import { Component } from '#angular/core';
import { IonicPage, NavController} from 'ionic-angular';
import { LoginPage } from '../login/login';
import { TabsPage } from '../tabs/tabs';
import { AuthServiceProvider } from '../../providers/auth-service/auth-service';
/**
* Generated class for the SignupPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-signup',
templateUrl: 'signup.html',
})
export class SignupPage {
responseData : any;
UserData={"username":"","password":"","email":"","name":""}
constructor(public navCtrl: NavController, public authService: AuthServiceProvider) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad SignupPage');
}
signup(){
this.authService.postData(this.UserData,'signup').then((result) => {
this.responseData = result;
console.log(this.responseData);
localStorage.setItem('userData', JSON.stringify(this.responseData));
this.navCtrl.push(TabsPage);
}, (err) => {
// Error log
});
}
login(){
//Api connections
this.navCtrl.push(LoginPage);
}
}
this is the signup.html code
<!--
Generated template for the SignupPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>signup</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item>
<ion-label floating>Name</ion-label>
<ion-input type="text" value="" [(ngModel)]="UserData.name"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Email</ion-label>
<ion-input type="text" value="" [(ngModel)]="UserData.email"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Username</ion-label>
<ion-input type="text" value="" [(ngModel)]="UserData.username"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password" [(ngModel)]="UserData.password"></ion-input>
</ion-item>
<button ion-button block class="margin-top" (click)="signup()">Signup</button>
Or Login
</ion-list>
</ion-content>
I have signup.jsx
import React from "react"
import { render } from "react-dom"
import SignupContainer from "./containers/SignupContainer"
class Signup extends React.Component {
user(){
this.props.type='user';
}
hotel(){
this.props.type='hotel';
}
render() {
return (
<div>
Registration Type :
<br></br>
<button onClick={this.user}>user</button>
<button onClick={this.hotel}>hotel</button>
<SignupContainer type={this.props.type}/>
<h1>Signup</h1>
</div>
);
}
}
render(<Signup type='user'/>, document.getElementById('Signup'))
My SignupContainer.jsx
import React from "react"
import Headline from "../components/Headline"
export default class SignupContainer extends React.Component {
render() {
if(this.props.type=='user'){
return (
<div className="container">
<div className="row">
<div className="col-sm-12">
<form action="/loginapp/" method="POST">
First Name:
<input type="text" name="first_name">
</input>
<br></br>
Last Name:
<input type="text" name="last_name"/>
<br></br>
Gender:
<input type="radio" name="gender" value="male" />Male
<input type="radio" name="gender" value="female" /> Female
<br></br>
<input type="submit" value="Submit"/>
</form>
</div>
</div>
</div>
);
} else if(this.props.type=='hotel'){
return(<h1>{this.props.type}</h1>);
}
}
}
What i want is that when i click on user button then it should show me the registration form and when i click on hotel button it should print hotel without reloading the page.
In React, props are passed down from parent to child, and should be considered immutable. On the other hand, state is used by components internally and can be updated with this.setState(), which triggers a re-render. Also, when using native JavaScript classes, you need to bind the class methods to the class if you want this to refer to class. So in your case, something like this should work:
class Signup extends React.Component {
constructor(props) {
super(props);
this.state = { // this is your default state
type: 'user'
}
}
user() {
this.setState({
type: 'user'
})
}
hotel() {
this.setState({
type: 'hotel'
})
}
render() {
return ( < div >
Registration Type:
< br > < /br>
<button onClick={this.user.bind(this)}>user</button >
<button onClick = {this.hotel.bind(this)}>hotel</button>
<SignupContainer type={this.state.type} />
<h1> Signup </h1>
</div>
);
}
}
render( < Signup type = 'user' / > , document.getElementById('Signup'))
Try not to change props of own component after component has mounted. Instead use states.
import React from "react"
import {render} from "react-dom"
import SignupContainer from "./containers/SignupContainer"
class Signup extends React.Component {
constructor(props){
super(props);
this.state = {type : this.props.type};
}
user() {
this.setState({type: 'user'});
}
hotel() {
this.setState({type: 'hotel'});
}
render() {
return ( <div >
Registration Type:
<br />
<button onClick={this.user}>user</button >
<button onClick = {
this.hotel
} > hotel </button>
<SignupContainer type={this.state.type}/ >
<h1> Signup </h1>
</div>
);
}
}
render( < Signup type = 'user' / > , document.getElementById('Signup'))
I am trying to validate my form but getting the error undefined touched, think i did something wrong with the import filed,can some one please suggest me some help.
My Template,
<h3 class = "head">MY PROFILE</h3>
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
<div class="row">
<div class="form-group">
<label class="formHeading">firstname</label>
<input type="text" id="facebook" class="form-control" [formControl]="form.controls['firstname']" >
</div>
<div *ngIf ="firstname.touched">
<div *ngIf ="!firstname.valid" class = "alert alert-danger">
<strong>First name is required</strong>
</div>
</div>
</div>
</form>
My Component,
import {Component} from '#angular/core';
import {Http, Response, Headers} from '#angular/http';
import {Observable} from 'rxjs/Observable';
import {Subject } from 'rxjs/Subject';
import {CORE_DIRECTIVES} from '#angular/common';
import { Router, ROUTER_DIRECTIVES } from '#angular/router';
import {Control,ControlGroup} from '#angular/common';
import {FORM_DIRECTIVES,FormBuilder,FormGroup,Validators, REACTIVE_FORM_DIRECTIVES} from '#angular/forms';
Component({
templateUrl: './components/profile/profile.html',
directives: [CORE_DIRECTIVES,ROUTER_DIRECTIVES,FORM_DIRECTIVES,REACTIVE_FORM_DIRECTIVES],
})
export class Profile {
http: Http;
form: FormGroup;
constructor(fbld: FormBuilder,http: Http,public router: Router) {
this.http = http;
this.form = fbld .group({
firstname: ['', Validators.required],
lastname: ['', Validators.required],
profilename :['', Validators.required],
image : [''],
phone : ['']
});
}
onSubmit(form) {
console.log(form);
var headers = new Headers();
headers.append('Content-Type','application/x-www-form-urlencoded');
this.http.post('http://localhost/angular/index.php/profile/addprofile', JSON.stringify(form),{headers:headers});
subscribe(response => {
if(response.json().error_code === 0) {
alert('added successfully');
this.router.navigate(['/demo/professional']);
} else {
alert('fail');
}
});
}
}
I am trying to validate my form but getting the error undefined touched, think I did something wrong with the import files. Can someone please suggest me some help.
You have to find the control in the form. Try to use:
form.controls['firstname'].touched
and:
form.controls['firstname'].valid