I'm trying to add a feature for in line editing.
Here's my html:
<div class="value" data-ng-repeat='value in aaVM.archValues'>
<div class="nameContainer">
<div class='name' data-ng-hide='editing' data-ng-click='editing = !editing'>
<span>{{value.name}}</span>
<div class="icon">
<md-icon class="mdIcon" md-svg-src="./resources/images/icons/edit.svg"></md-icon>
</div>
</div>
<form data-ng-submit='aaVM.updateName(value.name); editing= !editing' data-ng-show='editing'>
<input type="text" data-ng-model='value.name'>
<div class="cancel" data-ng-click='editing = !editing'>X</div>
<input type="submit">
</form>
</div>
</div>
Everything works. Here's the issue, because I'm using ng-model to bind the values name in the form, When I hit cancel, the ui will present the edited version of the input(assuming edits were made) despite hitting the cancel button.
I want the user to be able to edit freely, and upon hitting the cancel button, it revert the value back to the original value of value.name.
I could use a different variable, but I want the initial value of the input to be the value from the ng-repeat. Is there a way to temporarily clone the value and retrieve it later in the scope of an ng-repeat. Or any other work around to enable to cancel button in the way I've described? Thanks.
In Angular, Use directive ngModelOptions to change ng-model value on submit event and use $rollbackViewValue to roll back input original value
Try this:
<form data-ng-submit='aaVM.updateName(value.name); editing= !editing' data-ng-show='editing'>
<input type="text" ng-model-options="{ updateOn: 'submit' }" data-ng-model='value.name'>
<div class="cancel" data-ng-click="editing = !editing; value.name.$rollbackViewValue();">X</div>
<input type="submit">
</form>
Official Documentation for more information
Related
I am trying to autofill a text box based on the state from another component. Which works fine. But when I go to add ngModel to the text box to take in the value when submitting the form. The value is cleared and not displayed to the user.
<div *ngIf="autoFill; else noFillMode" class="row">
<label>Mode of Transport</label>
<input type="text" value="{{state.type}}" readonly />
</div>
<div *ngIf="autoFill; else noFillStop" class="row">
<label>Nearby Stop / Station</label>
<input
type="text"
value="{{state.stopName}}"
[(ngModel)]="stopName"
readonly
/>
</div>
As you can see in the image the text shows up when there is no ngModel placed on the input. But when there is a ngModel it is not shown.
Can anyone help with this?
Use [(ngModel)] for both text boxes
<div *ngIf="autoFill; else noFillMode" class="row">
<label>Mode of Transport</label>
<input type="text" [(ngModel)]="state.type" readonly>
</div>
<div *ngIf="autoFill; else noFillStop" class="row">
<label>Nearby Stop / Station</label>
<input type="text" [(ngModel)]="state.stopName" readonly>
</div>
Note: [(ngModel)] is for two-way binding which will update data from component to view and vice-versa.
In two-way data binding, automatic synchronization of data happens between the Model and the View. Here, change is reflected in both components. Whenever you make changes in the Model(.ts), it will be reflected in the View(html) and when you make changes in View, it will be reflected in Model.
This happens immediately and automatically, ensures that the HTML template and the TypeScript code are updated at all times.
ngModel creates a two-way binding. In your case, you probably don't have stopName attribute in your component and that's why when you add NgModel you get empty input field. Your code is redundant in this case, value and ngModel both try to set the input value.
Try removing value and set existing attributes to ngModel.
<div *ngIf="autoFill; else noFillMode" class="row">
<label>Mode of Transport</label>
<input type="text" value="{{state.type}}" readonly>
</div>
<div *ngIf="autoFill; else noFillStop" class="row">
<label>Nearby Stop / Station</label>
<input type="text" [(ngModel)]="state.stopName" readonly>
</div>
You can also try to use FormControl, which gives option to set, get, clear, check the validity, ... values from specific formControl or from whole form.
Here is a small implementation in StackBlitz
Don't forget to import ReactiveFormModule
I have an angularjs form that pulls default data from scope. With the default data the form is expected to be validated and hence enable the button for submission but the reverse is the case except data is entered on the input field and this enables the button. here is the snippet
<div ng-controller="FormValidationController as frmValidationController" class="ui basic segment">
<form class="ui form" name="frmValidation" novalidate>
<div ng-class = "{'has-error':frmValidation.option1.$invalid && !frmValidation.option1.$pristine}"
class="required field">
<label>Selection</label>
<input ng-model="option" ng-minlength="3" formcontrol
name="option1" placeholder="Option" type="text"
class="ng-dirty ng-valid ng-touched" required>
<div _ngcontent-c5="" ngxerrors="option1">
<div class="input-error-message" ngxerror="validName" hidden="">
selection should be there
</div>
</div>
<p ng-show = "frmValidation.option1.$invalid && !frmValidation.option1.$pristine"
class = "input-error-message">required</p>
</div>
if the model has data, the button should be enabled on launch but this never happens and I want it to happen
<button ng-click="submit(); frmValidationController.submitForm(frmValidation.$valid)"
ng-disabled ="!frmValidation.$dirty || frmValidation.$invalid"
class="ui primary button" tabindex="0" type="submit">
Proceed
</button>
The problem is here:
ng-disabled ="!frmValidation.$dirty || frmValidation.$invalid"
Specifically:
!frmValidation.$dirty
The form is only dirty if an actually user has interacted with it. Because you're loading default data, the form is filled in correctly but the user has NOT touched or "dirtied" it.
Remove that check and it should work as expected I believe.
I'm trying to reset the values of the fields after sending the data. Does anyone have a hint how can I clear the fields using javascript?
<div class="form-group">
<label>Código da Matéria</label>
<input required class="form-control" type="text" name="codigoMateria"/>
</div>
<div class="form-group">
<label>Nome</label>
<input required class="form-control" type="text" name="nome"/>
</div>
</div>
<div class="row text-left">
<div class="col-md-4 col-md-offset-4">
<button type="button" class="btn btn-primary btn-block">Salvar</button>
Like Jaromanda said there is a reset method for form elements.
To use it you will need to already have a correct form. Then you’re talking about sending the data. For this you need a submit button.
After this to reset your content you can bind the submit event with a function which use the reset method for your form.
here is a fiddle: https://jsfiddle.net/r56nvn51/1/
If you use the input element with the submit type attribute it will send the data and the reset the page which resets the inputs.
Aside from doing that you will need to add some script.
And you do not need the type in your button element.
I have two issues with ng-model-options="{updateOn:'blur'}" and ng-change.
When user select a value from date picker and delete the value from
the field required field message is showing that is correct. Now if
user select value again required message is not going away until
user make a off click.How to fix this issue ?
Somehow related to first issue once user select the value save button is not enabled until user make a off click from the form.
How to display required message and enable the save button ?
when user select the value it should trigger the validation event.
Just want to understand. Is it because i am using ng-model-options with ng-change ?
main.html
<form id="createRcsaFormName" name="createRcsaCycleForm" novalidate
k-validate-on-blur="false">
<div class="col-md-12>
<input kendo-date-picker type="text" class="form-control"
id="asessPrdStartDate" name="asessPrdStartDate"
onkeydown="return false;"
ng-model="rcsaCycleDTO.asessPrdStartDate"
ng-change="validateDate('asessPrdStartDate','asessPrdEndDate')"
ng-model-options="{updateOn: 'blur'}" required
k-format="'MM/dd/yyyy'">
<p class="text-danger" ng-show="createRcsaCycleForm.StartDate.$touched && createRcsaCycleForm.asessPrdStartDate.$error.required">Start Date is required</p>
</div>
</form>
<button class="btn btn-primary" type="button"
ng-disabled="createRcsaCycleForm.$invalid"
ng-click="submit()">Save
</button>
Ive got a html form with a few select lists and a text box in it. I also have a submit button which is outside of the form. The reason for this is I want to construct the parameters myself, as I dont want the content of all of the select lists. The problem I am having is, that when I press my submit button,The form automaticly trys to redirect to the same page, but with a ? at the end with all the contents of the form. I am also having problems where window.location.href is not working inside the submit() javascript method, but I am not sure if this is caused by the form issue or not. Example code:
<form>
<input name="cName" type="text" class="input-xlarge" id="input01" placeholder=
"Enter title" />
<div class="control-group">
<hr />
<label class="control-label" for="select01">Select box 1</label>
<div class="controls">
<select id="select01" name="type" onChange="reportModification(this.value)">
<option>One</option>
</select>
</div>
</div>
</form>
<button class="btn btn-primary" onClick="next()">Next</button>
This is not the exact code from the page, just a replica.So it might not be valid html in some places. Thanks for the help :)
The reason you get parameters in the url is that a get request is used instead of a post request. you should use:
<form method="POST" action="">
Also why is your button outside the form? you could have this instead:
</div>
<input class="btn btn-primary" type="submit" value="Next" onClick="next()" />
</form>
I think your button has to be inside the form element. You could use an onsubmit in the form element to intercept the form before it gets sent to the server. Here you could manipulate the values before they go. You would also need an action attribute in the form. If your function returns true, the data will be submitted, false and it won't.