I am not able to type anything into the below input text, which has been created using reactjs
<input type="text" id="txtName" className= "form-control" value=""/>
and the equivalent html code in browser is as below
<input id="txtName" class="form-control" value="" data-reactid=".0.0.0.1.0.1.0.1.1" type="text">
I am not able to fix this for some time, finally I changed the data-reactid attribute manually in the browser.
After I changed the value of data-reactid manually in the browser, I am able to type characters into the input field.
I have many other screens with text input field, which has no such issues.
how to fix this issue? why this issue occurs, I mean what's the issue with data-reactid attribute?
When using "value" you're telling React this is a controlled component, that is, the input is set programatically.
Just remove the value field and you're good to go.
Reference
https://facebook.github.io/react/docs/forms.html
Related
I have a simple form in react, which lives in a modal. If a user was to use autofill for an email field for example, it would update other fields including fields that I've already filled in. This would lead users to submitting data, not knowing that fields out the view have been updated.
I've tested this in non-react forms and Google Autofill works fine, in that it would not overwrite existing values in fields. But in react lets say I inserted firstname = john, and then use autofill on the email...it would over 'John' and use whatever is saved in Autofill.
Is anyone aware of a way around this? I'm not going to turn autocomplete off as I still want users with the ability, anyway I've tried variations of autocomplete=off as suggested else where but still no result
You can use autocomplete="off" in your input that you do not wish to autofill.
Please also make sure your input types are correct.
example: <input type="text" name="foo" placeholder="foo" autocomplete="off">
You can even do this using JS:
inputElm.setAttribute( "autocomplete", "off" );
as an example.
regards
Aaron
Try to create hidden input right before your input and add random number for your original input name where you don't want Chrome to autofill values:
<input type="text" name="" value="" readOnly={true} style={{display: "none"}}/>
<input
type="text"
name={"address " + Math.random()}
/>
I am completely new to AngularJs. I need to make autocomplete=off for a password input.
Is autocomplete=off the only way or do we have to do it in some different way in AngularJs?
This doesn't nothing to do with AngularJS at all, but simply html.
Regarding to your statement, password fields shouldn't be autocompleting if they are set to type password, otherwise if you want to set a specific field inside a form to autocomplete off you can do it setting that property to false like this <input autocomplete="on|off">.
This can be defined at form level or at input level. In a form it would be like this:
<form action="" autocomplete="on|off">
</form>
Also you can define it in a form level, and override the behavior for some specific inputs like this:
<form action="" name="myform" autocomplete="on">
<input autocomplete="off" name="myInput" >
</form>
In the above code, in the form myform the autocomplete is on, it means all inputs (the one which allow it) will do autocomplete, but in the input myInput will not, since it overrides the form behavior.
More info can be found in The HTML autocomplete attribute
This should be sufficient:
<input type="password"
autocomplete="off"
placeholder="password"
ng-model="vc.password">
I added the autocomplete="off" just for redundancy but it seems completely unnecessary.
jsbin - https://jsbin.com/bowuxopese/edit?html,js,output
I use a bootstrap modal for a form in my code.
So, I need standard-values for two textfields, and I tried to simply use VALUE like
<input type="text" value="myStandardText" ng-model="something">
I think it's because of the ng-model, but why?
And do you know a way to get the same result as with value, too?
(For now, I use "placeholder" instead, but value would be better)
UPDATE: Ok, i got a step closer.
<input type="text" ng-model="e_uname" ng-init="e_uname = 'a std txt'">
does the trick, but i need now to set a saved value as init-value.
i added "uname" to my scope, but with input it doesn't work.
<input type="text" ng-model="e_uname" ng-init="e_uname = {{uname}}">
I tried also with different quote marks. Any ideas?
Ok guys, I found the answer.
Final solution is:
<input type="text" ng-model="e_uname" ng-value="uname">
I'm having a problem with an md-input-container when I have two validations applied to my input tag. I'm using ng-model-options="{ updateOn: 'blur' }", but the problem occurs even without it. For example:
<md-input-container>
<label>Description:</label>
<input name="description" ng-model="list.description" type="text" ng-minlength="3" required />
<div ng-messages="listForm.description.$error">
<div ng-message="minlength">List description is too short</div>
<div ng-message="required">List description is required</div>
</div>
</md-input-container>
If I type "Te" and then press TAB, the ng-minlength validation message shows. But if then I leave the input empty, the required message does not shows (but the input is decorated, as it should be).
The same behavior is reproductible here (https://material.angularjs.org/latest/demo/input). In the Erros -> Description input, if I type more than 30 characters then empty the input, the message is not shown. But if I type a correct value and then empty the input, the message shows.
In my opinion minlength and required is kind of same thing. So you must either one of them. See the for the example link.
http://codepen.io/next1/pen/PNjdBz
Even if you don't specify ng-minlength in input it will show error in ng-message because it is the same thing. So I think you should use ng-message-exp to check both the condition. And the link you refered to material design docs in releated to maxlength and required while you are looking for minlength and required.
This is a known problem with Angular Material and ngMessages.
Subscribe to the following issue if you want to be notified about any progress. I do the same...
https://github.com/angular/material/issues/6767
If you must solve this immediately then you can make use of the workaround described over there but bear in mind that it's not aesthetically perfect.
I have a form that POST all data that is entered, when saving. But when I refresh the page, not all entries are bound to their respective input fields.
It is a bit strange because I am using ng-model on all the fields.
Here is an example of what doesn't bind:
<input name="full_name" ng-model="user.full_name" type="text" required></input>
and here is one that does bind:
<input name="address" ng-model="user.address" type="text" required></input>
Has anyone run into this issue, or notice something I may be missing?
It could be the browser remembering your last input in the forms. So after refreshing, the browser pre-populates the form and angular doesn't update the scope. There is a Google Groups thread about that. The best solution I found is to add autocomplete="off" in the inputs of the forms. Because after refreshing, there is no way angular could be remembering your last input in the form, unless you are using cookies for that wich you are obviously not.