theadam / react-inform Goto Github PK

Hello,
Few months before, I reported that form.onValues() doesn't cause form validation: #12
Now I'd like to reset fields of form without any validation when, for example, I submit data and the request succeeds - I wouldn't like to see error messages.

Is it possible to avoid validation in such situations?

Assumption:
I see at least four ways to achieve this effect:

• pass to the form additional validate functions to work sequentially. One of them can be prevalidator and somehow transfer validation process to next validators with special flag that means not to validate more. (it is monstrous but doesn't require any changes to react-inform)
• implement form.clear() method (dislike)
• add optional parameter to form.onValues(fields): form.onValues(fields, needValidate = true) (more suitable - gives more opportunities)
• add flag to form, such as form.needValidate that can be affected (changed) from wrapped from and from outside and always stops validation for all changes in the form. (most flexible)

What do you think about this feature?

We are currently working https://github.com/AMPATH/ng-amrs which has a data collection bit with some quite lengthy forms defined in json. We use http://angular-formly.com/ to render the forms and we basically go through a json form and create a formly config. We are looking at alternatives and react has been thrown on the table. The reason am looking at inform is the way it handles forms it means we can simply create a field map and have it rendered. But they are cases we have to deal with fields added at runtime which also contain validations. Can inform handle this cases well. Another thing is that our forms have pages but I think we can figure out that. The only thing I need to understand is how to add validations and adding fields at runtime. Some of the validations are also functions but I think inform can handle that.

Hello,
Do I have any way to call wrapped form's methods? The wrapper has fields and errors properties but it looks like I don't have real access to the wrapped form.

In addition, it can be awesome to add an opportunity to force validate the form remotely.

There were some changes since v15 of ReactJS library. And it needs some code adjustments. Have you even planned to UP reactjs library ? I've just hacked around and it's not hard. Only few tests are failing. Will able to submit PR this week.

Hi,
I am trying to use the formatMessage function from react-intl v2 to display error messages.
This function is injected to a component with injectIntl(), we can then access it via props.
Since error strings are hard coded in the form decorator, do you have any advise to make it works with react-intl ?

Hello,
We try to use your component with async validate() and then errors are not transfered to the form.
Could you add support of asynchronous validation interface to the project?

How to get the value of a form input component when it changes? I'm using the onChange prop of the react-inform form component to execute a method that checks the form input component value returned by this.props.form.values(), but I always get the previous value.

So for example, if using a <select name="myselect"> list has options A, B, C and D. When I select B, this.props.form.values().myselect is A, when I select C, it's B and when I select D it's C..

Any ideas?

The following is my code:

import React,{Component} from 'react';

// Components
import {form} from 'react-inform';
import {FormAlert,SubmitButton} from '../../FormsCommon';

// Other
import {timeOptions} from './common';

// Style
import '../../FormsCommon/style.scss';

class NewForm extends Component{

	constructor(props){
		super(props);
		this.state={
			canSubmit:false,
			error:'',
			customTime:false
		};
	}

	submit(e){
		e.preventDefault();

		const {form}=this.props;
		form.forceValidate();

		if(!form.isValid()){
			this.setState({error:'There are errors in the form, please correct before you can submit!'});
		}else{
			// Call action creator provided by the parent component via props.onSubmit
			this.props.onSubmit(null,form.values());
		}
	}

	timeOptions(options){
		return(
			options.map((option,index)=>{
				return(
					<option key={index} value={index}>{_.capitalize(option)}</option>
				);
			})
		);
	}	

	renderTimeControls(show){
		const {startTime,endTime}=this.props.fields;
		if(show){
			return(
				<div>
					<div className="row">
						<div className="col-sm-12 form-group">
							<label htmlFor="startTime">Starts at</label>
							<input name="startTime" type="text" className="form-control" {...startTime.props} />
							<span className="text-danger">{startTime.error}</span>
						</div>				
					</div>

					<div className="row">
						<div className="col-sm-12 form-group">
							<label htmlFor="endTime">Ends at</label>
							<input name="endTime" type="text" className="form-control" {...endTime.props} />
							<span className="text-danger">{endTime.error}</span>
						</div>				
					</div>
				</div>
			);
		}else{
			return null;
		}
	}

	formChanged(e){
		const time=parseInt(this.props.form.values().time);
		let customTime=false;

		console.log(time);
		if(timeOptions[time]=='Custom'){
			customTime=true;
		}else{
			customTime=false;
		}
		this.setState({customTime:customTime});
	}

	// Render method
	render(){
		const {name,description,time,notes}=this.props.fields;

		return(
			<form onChange={e=>this.formChanged(e)} onSubmit={e=>this.submit(e)}>
				<FormAlert show={this.state.error} message={this.state.error} />
				<div className="row">
					<div className="col-sm-6">
						<div className="row">
							<div className="col-sm-12 form-group">
								<label htmlFor="name">Name</label>
								<input name="name" type="text" className="form-control" {...name.props} />
								<span className="text-danger">{name.error}</span>
							</div>
						</div>
						<div className="row">
							<div className="col-sm-12 form-group">
								<label htmlFor="name">Description</label>
								<input name="description" type="text" className="form-control" {...description.props} />
								<span className="text-danger">{description.error}</span>
							</div>				
						</div>

						<div className="row">
							<div className="col-sm-12 form-group">
								<label htmlFor="time">Time</label>
								<select name="time" className="form-control" {...time.props}>
									<option>Select a time</option>
									{this.timeOptions(timeOptions)}
								</select>
								<span className="text-danger">{time.error}</span>
							</div>				
						</div>

						{this.renderTimeControls(this.state.customTime)}

						<div className="row">
							<div className="col-sm-12 form-group">
								<label htmlFor="name">Notes</label>
								<textarea name="notes" className="form-control" {...notes.props} ></textarea>
								<span className="text-danger">{notes.error}</span>
							</div>				
						</div>
						<div className="row">
							<div className="col-sm-12 form-group">
								<SubmitButton show={true}/>
							</div>
						</div>
					</div>
				</div>
			</form>
		);
	}
}

// Form Validation
const fields=['name','description','time','startTime','endTime','notes'];

function validate(values){
	const {name,description,time,startTime,endTime,notes}=values;
	const errors={};

	if(!name) errors.name = 'Name is required!';
	if(!description) errors.description = 'You need to enter a description for this work center!';
	if(!time) errors.time='You need to select a time value';  	

	return errors;
}

export default form({fields,validate})(NewForm);

I'm looking for a way to validate each fields individually like onChange I could check if the the input is valid or on blur of a certain field it would validate that field (only that field).

is this possible? or I'm just missing something in the documentation?

Cheers.

Hello,
It looks like there's no opportunity to set the fields' value anywhere expect direct keyboard input events.
Is it possible to add support of transferring value to the fields from the outside (for example, by API like setValue()?

I'm trying to create a dynamic form using your recent example, however an error is thrown when using the decorator or function without the field/validate keys. It kind of looks like the packaged/babelified code messed up/discarded the default params:

// from src form.js
export default function form({
  fields: defaultFields = [],
  validate: defaultValidate = () => ({}),
} = {}) {
  return (Wrapped) => class FormWrapper extends Component {

// from lib form.js
function form(_ref) {
  var fields = _ref.fields;
  var _ref$validate = _ref.validate;
  var validate = _ref$validate === undefined ? function () {
    return {};
  } : _ref$validate;

  return function (Wrapped) {

If I import react-inform/lib/form.js and change

var fields = _ref.fields; 
to 
var fields = (_ref && _ref.fields) || [];

that error is fixed, but another error is thrown for the validate var of course.

Is this a babelification issue, or am I missing something here? Please let me know if you need any more details, and thanks for the great form library!

Currently, react-inform's Form:

1. handles: onChange, onValidate and value fields
2. forwards all props to inner component

it probably shouldn't do (2)

Hello,
Let's consider the situation when we have handleSubmit() like this:

handleSubmit = (e) => {
  const { form } = this.props;

  form.forceValidate(); // (doesn't validate!)
  if (!form.isValid()) {
    return;
  }

  // submitting...

  form.onValues({}); // clean the form
  form.forceValidate(); // (also doesn't validate)
}

The problem is that form.forceValidate() at the end of the function doesn't work: validation function won't be called. So, the form "is still valid" - you can try to submit again... All will be ok, forceValidate() at the beginning of the function also doesn't work -> form.isValid() returns true. The form'll be validated only after real change like passing a character to its field. form.onValues() doesn't cause validation.

What's the purpose of form.forceValidate(), if it doesn't validate the form?
Why doesn't form.onValues() cause the validation, like common form changes?

I just read README and this library looks promising, but looking at examples I'm worried that working with selects (especially with multiple values), multiple checkboxes or radios may be difficult.

Not tried it yet, gonna do, but no matter if this is hard or easy thing to do - I think you should include such examples in your demos :)

TL;DR;

If you initialize a form including a boolean field, if that field is initialized as false, the value you will get from react-inform is an empty string.

Example

import React from  'react'
import { form, createValidate } from 'react-inform'

class Form extends React.Component {
  constructor() {
    super()
    this.state = { values: { boolean: false, ... } }
  }

  componentWillMount() {
    this.props.form.onValues(this.state.values)
  }

  render() {
    console.log(this.props.fields.boolean.value)
    return <p>{this.props.fields.boolean.value}</p>
  }
}
export default form({ fields: ['boolean'], validate: {} })(Form)

Solution

Debugging I found the following, that I think it may be the problem since you are doing false || '' which will return ''. Maybe you can change the way you are handling booleans there.

Thanks!

Hi, thanks for your great package! Can we reset all field's value programmatically without using ResetFormButton? also I noticed that by using ResetFormButton will show up the error

Is there a way to get list of fields changed during interaction with form? I supposed state.touched has something to do with this, but it doesn't look like a proper API endpoint :)

When I pass the form values from the parent component:

<ParentComponent>
<EditForm value={recordToEditValues} />
</ParentComponent>

The fields of the form appear properly populated, but I can't change their content. Typing into them has no effect (it's like their state holding their value is not changed upon the press down keys).

When you provide a value to the inform wrapped component then validation is not performed. It only broadcast changes and leave all validation logic to parent component. It's not possible to have AND default values for fields AND validation.

Hi Adam, thank you for the library. Simple stuff, no fuss.

Do you think is possible to add a flag, blurTouch={Bool} default: true, to control the blur validation? I only want to validate on submit, and that will do it.

P.S. I actually had to fork and add the flag myself but if you're ok with it, I can make a PR.

Update: No, that will not do it. It's more complex than that it seems. Everything is happening real time, on change, what I need is to validate at submit (not on change or on blur, or on componentWillReceiveProps). So I have to change quite a bit of code for this to happen.

Currently, react-inform has forceValidate() which exposes snapshot of errors to the props. We found ourselves in a situation when we need to get full list of current errors synchronously.

Do you think a method which returns a copy (?) of form.state.errors could be introduced?