I have a question concerning angularJS.
I want to validate a form. If there is an error, I want do an action in order to process the data further. I.e. users has not filled all fields, but I want send the inputs nevertheless.
Thanks in advance...
You should check the $valid attribute of the form inside your controller.
<form name="newFeed">
URL: <input size="80" name="url" ng-model="newFeed.url" type="url" required>
<button ng-click="addFeed(newFeed)">Add Feed</button>
</form>
In a controller, a bound value can be interrogated for the validation status by checking the > $valid property.
$scope.addFeed = function(feed) {
if (feed.$valid) {
// Copy this feed instance and reset the URL in the form
$scope.feeds.push(feed);
$scope.newFeed.url = {};
}
};
(as taken from here).
You check the $valid attribute every time you call addFeed by pressing the submit button.
Related
If I was making a website where the user submits some data using a form and then the user is redirected to a page with a unique URL where they can view this data, what is the best way to display this data to user in a way in which they can make updates to it?
To give some context I am using react and right now I am showing the same form again on the view data page, but as the forms have slightly different display options, such as some fields being disabled and some extra buttons I am repeating the same form in two seperate components which seems to go against the react way of doing things.
The way I would personally do it is have all your form elements in a single component and use it for the create and edit page, then just pass a "isCreating" or "isEditing" prop, or something similar. In that component, you can then conditionally disable your inputs.
Component
const SomeForm = ({ isEditing }) => {
const onSubmit = () => {
if (isEditing) {
// Make request to update endpoint
} else {
// Make request to create endpoint
}
};
return (
<>
<form onSubmit={onSubmit}>
<input disabled={isEditing} />
<input />
</form>
</>
);
};
Create Page Usage
<MyForm />
Edit Page Usage
<MyForm isEditing />
Note that if you're doing a ton of conditional logic/rendering based on whether you're creating or editing a form, it might be better to split it into two separate form components. If you're simply disabling some inputs on the edit page and doing different submit logic, then I think this is fine.
I want to submit a #atlaskit/form from the button outside the form. I have gone through https://atlaskit.atlassian.com/packages/core/form but no documentation regarding this
Warning: When trying to submit a form remotely, you would need to go out of your way to actually make the validation work. This is applicable to HTML forms, thus not limited by Atlaskit forms.
Read about it here:
How to force a html5 form validation without submitting it via jQuery
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation
Answer:
Atlaskit form actually renders the native html form underneath. Therefore,
we can attach a ref to the Form element and then trigger submit of the form property of the current ref.
Example:
// attach the ref to form
class extends React.Component{
form = React.createRef();
render() {
<Form
ref={this.form}
{...props}
>
{children}
</Form>
}
}
Trigger submit on html form:
this.form.current.form.submit()
See example codesandox here.
i'm trying to validate a basic form in reactjs which contains select dropdown box.i'm new to react and not able to figure out the correct tutorial.please suggest.
<select required className = "custom form-group" name = "workFlow"
value = {this.state.result.workflow}
required onChange = { this.handleChange} >
{
data.map((data1) => {
return <option key={data1.id}>{data1.workType}
</option>;
})
}
</select>
i am fetching data from a json file and i need to made this select field as mandatory
Using the "required" attribute with a element
you must have at least one child element
the first child element must have either an empty value attribute OR
the first child element must have no text content.
Other than that if you want to make use of event handlers then check the data that you received from the form in the onSubmit form Handler and then by making use of state display the error message or if check pass then submit the request to server.
Hope this help you out.
Hi I am using React 14 and writing it in ES6. I am using formsy-material-ui for form validations. There is a scenario where I want to clear the value of text field on click of a button.
I tried the following code
<FormsyText
name="email"
ref="email"
validations="isEmail"
validationError="Invalid Email"
hintText="Email"
value={this.state.emailValue}
/>
And on click of the button, I am executing the following line of code
this.setState({emailValue : ''});
But the text field is not getting cleared.
How to clear it.
Pls help.
So, if you were using a controlled input (maybe using directly the TextField from Material-ui) - your code would be right, however the FormsyText component handle it's value internally.
If you pass a value or defaultValue it'll just be used when it's rendered, you can check it here.
I only see one way to clear the value now, in an imperative style.
this.refs.email.setState({ value: "" })
Note: I suggest you to change the way you're using the ref. Using refs with a string is deprecated and probably will be removed in the future. Instead you should pass a function that's gonna receive that component. https://facebook.github.io/react/docs/more-about-refs.html
Example:
<FormsyText
name="email"
ref={(node) => this._emailText = node}
validations="isEmail"
validationError="Invalid Email"
hintText="Email"
value={this.state.emailValue}
/>
//And to clear it
this._emailText.setState({ value: "" })
Try reset field after setState:
this.setState({emailValue : ''});
this.refs.email.reset()
Also you can reset all form.
this.refs.form.reset()
const formRefdeposit = useRef(null);
<Formsy
onValidSubmit={handleSubmit}
onValid={enableButton}
onInvalid={disableButton}
ref={formRef}
>
....Form Fields
</Formsy>
if you have class in your js file then use
this.formRef.current.reset();
if without class then use
formRef.current.reset();
In AngularJS, is there a way to mark a form that has already been submitted as unsubmitted (so it loses the ng-submitted class?
Background:
In my css, I'm using the angular validation classes to accomplish the following:
Initially, all inputs have a normal border color.
If the user modifies an input to have an invalid value, set the border color to red.
If the user clicks the submit button, set the border color of all invalid inputs to red.
I am accomplishing this like so:
input.ng-dirty.ng-invalid, .ng-submitted .ng-invalid {
border-color: #F00;
}
That works fine. Now I have a form that submits an asynchronous request, and if the server responds with a success status, I want to clear the form (and effectively reset it to its original state). The problem is when I clear the form, it still has the .ng-submitted class, so all of the required fields have a red border. However I want them all to have a normal border.
I should be able to mark all of the fields as pristine using $setPristine(), but I don't see any way to mark the form as unsubmitted. Is this possible, or do I need to create and maintain my own class for doing this?
You can reset your form and thus mark it as unsubmitted using the following piece of snippet.
Html:
<input type="button" ng-click="reset(form)" value="Reset" />
Angular Script:
$scope.reset = function(form) {
if (form) {
form.$setPristine();
form.$setUntouched();
}
$scope.user = angular.copy($scope.master);
};
This was taken from https://docs.angularjs.org/guide/forms