I'm playing around the interesting approach to make forms just modeling json.
So I've read about react-jsonschema-form.
So, I've create a custom component which renders a form like this:
import React, { Component } from "react";
import Form from "react-jsonschema-form";
const schema = {
title: "Todo",
type: "object",
required: ["title"],
properties: {
title: {type: "string", title: "Title", default: "A new task"},
done: {type: "boolean", title: "Done?", default: false}
}
};
const log = (type) => console.log.bind(console, type);
export default class myFrom extends Component {
render(){
return (
<Form schema={schema}
onChange={log("changed")}
onSubmit={log("submitted")}
onError={log("errors")} />
);
}
}
Then I've referenced it in my create-react-app dummy project's App.js:
import myFrom from './custom-forms-test'
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<myFrom/>
</div>
);
}
}
export default App;
But nothing renders.
Now I'm stuck, maybe the form can't be a nested component? Is it possible?
Any hints?
Thanks!
React component names must start with a capital letter. Try renaming myForm to MyForm.
Related
I need to create a modal that pop-ups when the button is clicked; i tried with bootstrap-vue, following the documentation but it didn't worked.
I put in my vue project but it doesn't work. The button is there, but when i click the modal doesn't appear. When i go to the console, it says that the directive is not recognized. I will put the code and the error below
<template>
...
<c-card>
<div>
<b-button v-b-modal.exclude class="center" size="lg" variant="danger">Excluir conta</b-button>
<b-modal id="exclude" title="bootstrapVue">
<p class="my-4">Are you sure that you want to exclude your account?</p>
</b-modal>
</div>
</c-card>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import cCard from '#/components/Card'
import pStatusAchievements from './_partials/StatusAchievements'
import pStatusApps from './_partials/StatusApps'
import pStatusNetwork from './_partials/StatusNetwork'
import pStatus from './_partials/Status'
import pStatusPublication from './_partials/StatusPublication'
import pMyAccount from './MyAccount'
import pPowerUp from './_partials/PowerUp'
import {BModal, VBModal} from 'bootstrap-vue'
const cContentHeader = () => import('#/components/ContentMiddleHeader')
export default {
name: 'Perfil',
components: {
cContentHeader,
cCard,
pStatusPublication,
pStatusNetwork,
pStatusApps,
pMyAccount,
pStatusAchievements,
pStatus,
pPowerUp,
BModal,
},
data () {
return {
pubStatus: 1200,
networkApps: [
{ name: 'network', title: 'rede' },
{ name: 'appsUsage', title: 'uso dos apps' }
]
}
},
directives: {
'b-modal': VBModal
},
That is the vue-warn
[Vue warn]: Unknown custom element: <b-modal> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Perfil> at src/views/perfil/Perfil.vue
<MFeed> at src/views/mobile/mFeed.vue
<SlideXLeftTransition>
<NavbarContent> at src/views/mobile/mContent.vue
<NavbarContent> at src/layouts/main/MainLayout.vue
<FadeTransition>
<App> at src/App.vue
<Root
I am trying to set a specific country restriction using react-google-maps StandaloneSearchBox.
I have tried componentRestrictions, but I'm not sure how to use it.
Sharing my code below:
export const AutoCompleteSearchBox = compose(
withProps({
googleMapURL:googleMapUrl,
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px`, top:'3px' }} />,
}),
lifecycle({
componentWillMount() {
const refs = {}
this.setState({
types: ['(regions)'],
componentRestrictions: {country: "bd"},
onSearchBoxMounted:ref =>{ refs.searchBox = ref; },
onPlacesChanged:()=>{
const places = refs.searchBox.getPlaces();
this.props.onPlacesChanged(places);
},
})
const options = {
types: ['(regions)'],
componentRestrictions:{ country: 'bd' }
}
},
}),
withScriptjs
)`(props =>
<div data-standalone-searchbox="">
<StandaloneSearchBox
ref={props.onSearchBoxMounted}
bounds={props.bounds}
onPlacesChanged={props.onPlacesChanged}
controlPosition={ window.google.maps.ControlPosition.TOP_LEFT}
>
<TextField
className={props.inputClass}
placeholder={props.inputPlaceholder}
label={props.inputLabel}
name={props.inputName}
value={props.inputValue}
onChange={props.inputOnChange}
helperText={props.inputHelperText}
error={props.inputError}
/>
</StandaloneSearchBox>
</div>
);`
How can I solve this problem?
You can't add such restrictions for the SearchBox results, but you can specify the area towards which to bias query predictions. Predictions are biased towards, but not restricted to, queries targeting these bounds.
If you want to show only specific places, then you can Google Place Autocomplete feature. For it you don't event need to use additional React libraries for Google Maps. Here's the example:
import React, { Component } from 'react';
import Script from 'react-load-script'
class LocationMap extends Component {
handleScriptLoad() {
const inputEl = document.getElementById('address-input');
/*global google*/
var options = {
//types: ['address'],
componentRestrictions: {country: 'by'}
};
this.autocomplete = new google.maps.places.Autocomplete(inputEl, options);
this.autocomplete.addListener('place_changed', this.handlePlaceSelect.bind(this));
}
handlePlaceSelect() {
console.log(this.autocomplete.getPlace());
}
render() {
return (
<section>
<Script
url="https://maps.googleapis.com/maps/api/js?key=API_KEY&v=3.33&libraries=places&language=en®ion=US"
onLoad={this.handleScriptLoad.bind(this)}
/>
<div className="form-group">
<label htmlFor="address-map">Enter address</label>
<input type="text"
autoComplete="new-password"
className="form-control"
id="address-input"
name="address"/>
</div>
</section>
);
}
}
export default LocationMap;
Don't forget to add react-load-script package: npm i react-load-script --save
The RTL demo provided in material ui guides seems does not work for components.
As they said in the Right-to-left guide internally they are dynamically enabling jss-rtl plugin when direction: 'rtl' is set on the theme but in the demo only the html input is rtl and TextField isn't.
Here's the demo code from https://material-ui-next.com/guides/right-to-left/#demo
import React from 'react';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import TextField from 'material-ui/TextField';
const theme = createMuiTheme({
direction: 'rtl', // Both here and <body dir="rtl">
});
function Direction() {
return (
<MuiThemeProvider theme={theme}>
<div dir="rtl">
<TextField label="Name" />
<input type="text" placeholder="Name" />
</div>
</MuiThemeProvider>
);
}
export default Direction;
Once you have created a new JSS instance with the plugin, you need to
make it available to all components in the component tree. JSS has a
JssProvider component for this:
import { create } from 'jss';
import rtl from 'jss-rtl';
import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName, jssPreset } from '#material-ui/core/styles';
// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
// Custom Material-UI class name generator.
const generateClassName = createGenerateClassName();
function RTL(props) {
return (
<JssProvider jss={jss} generateClassName={generateClassName}>
{props.children}
</JssProvider>
);
}
I've just started trying out react after a few tutorials on Redux and React and I'm getting an error in the console:
Warning: Stateless function components cannot be given refs (See ref
"username" in FieldGroup created by Login). Attempts to access this
ref will fail.
What is the proper way to pass form field input values to my submit button? Should these values go into the redux store? After reading the docs: https://reactjs.org/docs/refs-and-the-dom.html#a-complete-example it seems like I should avoid refs in this case. So, without refs how do I get the input values to the submit button? Thanks for any help.
Login.jsx
import React, {Component, PropTypes} from 'react';
import {Row, Col, FormControl, FormGroup, ControlLabel, HelpBlock, Checkbox, Button} from 'react-bootstrap';
export default class Login extends Component {
render() {
const { errorMessage } = this.props;
function FieldGroup({ id, label, help, ...props }) {
return (
<FormGroup controlId={id}>
<ControlLabel>{label}</ControlLabel>
<FormControl {...props} />
{help && <HelpBlock>{help}</HelpBlock>}
</FormGroup>
);
}
const formInstance = (
<Col xs={12} md={8} mdOffset={2}>
<code><{'Col xs={12} md={8}'} /></code>
<form>
<FieldGroup
id="formControlsEmail"
type="email"
label="Email address"
placeholder="Enter email"
ref="username"
/>
<FieldGroup
id="formControlsPassword"
label="Password"
type="password"
ref="password"
/>
<Checkbox checked readOnly>
Checkbox
</Checkbox>
<Button type="submit" onClick={(event) => this.handleClick(event)}>
Submit
</Button>
{errorMessage &&
<p>{errorMessage}</p>
}
</form>
</Col>
);
return formInstance;
}
handleClick(event) {
const username = this.refs.username
const password = this.refs.password
const creds = { username: username.value.trim(), password: password.value.trim() }
this.props.onLoginClick(creds)
}
}
Login.propTypes = {
onLoginClick: PropTypes.func.isRequired,
errorMessage: PropTypes.string
}
Functional components in react (stateless) don't have refs.
From the official docs
Refs and Functional Components
You may not use the ref attribute on functional components because they don’t have instances:
Use an ES6 class instead if you need refs, if not use this.state from your Parent Login component with class syntax and use that instead with this.setState(yourState) when the input value changes on your FieldGroup
And then in your you would do
handleClick(event) {
const username = this.state.username
const password = this.state.password
const creds = { username: username.value.trim(), password: password.value.trim() }
this.props.onLoginClick(creds)
}
From the docs :
You can, however, use the ref attribute inside a functional component as long as you refer to a DOM element or a class component:
I have a child component which deals with the array of input controls. I want to have a formcontrol over the child component.
I am passing the array of json object, what would be the correct way to bind parent form to the child component's FormArray having 2 form control with Validator required on first.
This is the initial code
<h1>Child</h1>
<div formArrayName="names">
<div *ngFor="let c of names.control">
<input formControlName="firstName">
<input formControlName="lastName">
</div>
</div>
Intention is to bind parent form with the array of input control in the child component. Also form will become invalid if one of the input control in child component doesn't have required field.
http://plnkr.co/edit/HznCJfSEiSV28ERqNiWr?p=preview
I love solve old post :)
The key is that your custom Form Component has inside a FormArray, then use "writeValue" to create the formArray, see stackblitz
#Component({
selector: "my-child",
template: `
<h1>Child</h1>
<div *ngFor="let group of formArray.controls" [formGroup]="group">
<input formControlName="firstName" (blur)="_onTouched()" />
<input formControlName="lastName" (blur)="_onTouched()"/>
</div>
`,
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: Child,
multi: true
},
{
provide: NG_VALIDATORS,
useExisting: Child,
multi: true
}
]
})
export class Child implements ControlValueAccessor {
formArray: FormArray;
_onChange;
_onTouched;
writeValue(value: any) {
this.formArray = new FormArray(
value.map(x => {
return new FormGroup({
firstName: new FormControl(x.firstName, Validators.required),
lastName: new FormControl(x.firstName, Validators.required)
});
})
);
this.formArray.valueChanges.subscribe(res => {
this._onChange(res);
});
}
registerOnChange(fn: (value: any) => void) {
this._onChange = fn;
}
registerOnTouched(fn: (value: any) => void) {
this._onTouched = fn;
}
validate({ value }: FormControl) {
return !this.formArray || this.formArray.valid ?
null : { error: "Some fields are not fullfilled" };
}
}
You have to use formArrayName directive and *ngFor like this:
<form [formGroup]="form" (ngSubmit)="sayHello()">
<input formControlName="name"><br>
<input formControlName="email"><br>
<div formArrayName="username">
<div *ngFor="let user of username.controls; let i=index">
<my-child formControlName="i"></my-child>
</div>
</div>
<button type="submit">Register</button>
</form>
And with FormBuilder you have to use FormArray as well.
form = new FormGroup({
name: new FormControl('My Name'),
username: new FormArray([
new FormControl("value"),// ControlValueAccesor is applied only to one control, not two. So you cannot use javascript object like you are using below this line.
{firstName:"Anna", lastName:"Smith"},
{firstName:"Peter", lastName:"Jones"}
])
});
For more details, see this doc.
Case 2: passing FormGroup:
form = new FormGroup({
name: new FormControl('My Name'),
username: new FormArray([
new FormGroup({
firstName: new FormControl('Anna'),
lastName: new FormControl('Smith')
}),
new FormGroup({
firstName: new FormControl('Peper'),
lastName: new FormControl('Jones')
}),
])
})
If you are tring to pass the FormGroup as a ngModel parameters, you can't!