I have AngularJS template (modal dialog) and there is a code as following:
<div class="col-sm-9 dlg-input-pr">
<div>
<label for="ClientsURL">URL for client</label>
<input id="ClientsURL" ng-model="publishOptions.uniqueURL" type="text" class="uui-form-element" value="{{publishOptions.uniqueURL}}" select-on-click tabindex="1" />
</div>
</div>
<div class="col-sm-3 dlg-btn screen">
<ng-switch on="isPublishOptionsHidden">
<button ng-switch-when="true"
class="uui-button lime-green"
clip-copy="getTextToCopy()"
auto-focus>
Copy
</button>
<button ng-switch-when="false"
class="uui-button lime-green"
clip-copy="getTextToCopy()">
Copy
</button>
</ng-switch>
</div>
Here is function that gets the text to be copied:
$scope.getTextToCopy = function () {
return $scope.publishOptions.uniqueURL;
};
The first goal is to put focus on button when dialog opens, which I did using auto-focus directive. The second goal is to add the possibility when focus is on button to press enter and copy text from input box (ClientsURL). It doesn't work that is doesn't copy text to clipboard. It works when I click button using mouse.
How to solve this issue?
Related
I'm absolutely new to Angular.js, I got the file from someone to fix.
So the question is that I really want to change the div with clicking buttons, so I tried to search of it and i found the solution with radio button, but the thing is what i want to click is div.
So here is my code :
let vm = $scope
vm.isShown = function (color) {
return color === vm.color;
};
//this is the function in a controller
<div class="item">
<span class="group-name"
><p>PHASE 1.0</p>
Closed API Data Market</span
>
<input type="radio" ng-model="color" value="oneZero" /> 1.0
</div>
<div class="item">
<span class="group-name"
><p>PHASE 1.5</p>
Open API Data Market</span
>
<input
type="radio"
ng-model="color"
value="oneFive"
checked="checked"
/>
1.5<br />
</div>
</div>
</div>
<br />
<div class="servicePreparing" ng-show="isShown('oneZero')">
<img src="assets/img/serviceStop.jpg" />
</div>
<div class="select-list-area" ng-show="isShown('oneFive')">
I want to remove the inputs and want to click with div as class name as 'item'
You can see one example lives here: https://plnkr.co/edit/flMIhl6ugNUNXwpE
Also, what you have to do is set one variable (In the radio buttons were color), so in your AngularJS controller:
vm.color = '';
And set that value with ng-click in both divs, with the specific value, in your view you will have:
<div class="btn" ng-click="color = 'oneZero'">1.0</div>
<div class="btn" ng-click="color = 'oneFive'">1.5</div>
<div class="servicePreparing" ng-show="isShown('oneZero')">
One Zero Image Showed
</div>
<div class="select-list-area" ng-show="isShown('oneFive')">
One Five Image Showed
</div>
I want a step within a stepper to have an agreement, but don't want the extra button that says "I agree with what I just checked to agree to". Just click on the checkbox and go.
Using the standard Angular example, I swapped out the button for a checkbox and the stepper doesn't move forward.
<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
{{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
</button>
<mat-vertical-stepper [linear]="isLinear" #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Agree with Terms</ng-template>
<div>
<mat-checkbox matStepperNext formControlName="firstCtrl" required> I agree </button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field>
<input matInput placeholder="Address" formControlName="secondCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
You are now done.
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-vertical-stepper>
Expect to click the checkbox and have the stepper move directly to step 2.
I figured it out. The key word, matStepperNext, appears to not apply to checkboxes. However, if in the checkbox HTML, where you include #stepper in your stepper's div...
<mat-vertical-stepper #stepper [linear]="isLinear">you include a (change) event calling a function...
You can add a (change) event that calls a function with that name...
<mat-checkbox matStepperNext (change)="goForward(stepper);" formControlName="firstCtrl" required> I agree </button>
Then, in the .ts, make sure to include...
import { MatStepper } from '#angular/material/stepper';
...and then add this function...
goForward(stepper: MatStepper){
stepper.next();
}
When you click the checkbox, it should progress to your next step.
I have a simple bootstrap form . For sake of example i have a input field and a dropdown. I want to enable the save button only when the change is made. In order to do that, i made the save button enable only if the form is dirty.
The problem is - When i change the input field it works, the button gets enabled, where as when i change the dropdown, which is basically selecting the list item, the form does not identify it as dirty and hence it is still disabled.
Any ideas?
I also tried creating an hidden input field that gets updated everytime the select value gets updated - but still it is noto working .
My sample form (pls ignore any typos since i stripped of most of the code. The functionality works just fine. it is just the disabling of button that doesnt work)
<form name="customizeForm" id="customize-form" class="bm-form" data-ng-cloak novalidate data-ng-submit="ctrl.saveCustomization(customizeForm.$valid)">
<!--if i change this input, it works -->
<input id="answer" type="text" name="answer" data-ng-model="ctrl.answer">
<!--If i change the below dropdown, it doesnt work and the button is still disabled -->
<div class="form-group dropdown col-xs-12 col-md-6" data-uib-dropdown data-keyboard-nav data-is-open="status[$index].isopen" data-ng-init="status[$index].newSelectedValue = ''">
<button id="profile-menu" type="button" class="form-control select-control dropdown-togglebtn" data-uib-dropdown-toggle>
<span class="selected" data-ng-bind-html="status[$index].newSelectedValue</span>
<span class="icon icon-down-arrow" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu" role="menu" data-aria-labelledby="menu">
<li data-ng-repeat="answer in question.Answers">
{{answer.AnswerDesc}}
</li>
</ul>
</div>
<div id="save-profile" class="text-center form-submit">
<button type="submit" data-ng-disabled="!customizeForm.$dirty" id="btn-profile-questionnaire" class="btn btn-card reverse" title="Save">
Save</span>
</button>
</div>
</form>
If I press the enter button after editing input_a, processInputA() is called. The submit() function is omitted.
This does not happen for input_b: It works as expected even though it is similar to input_a. The submit() function is called as expected.
How can I prevent the button after input_a from firing?
<form class="uk-form" ng-submit="submit()">
<div class="uk-form-row">
<input type="text"
name="input_a"
ng-model="buffer.inputA" ng-change="reportInputATyped()"
class="uk-width-3-10 uk-form-small">
<button ng-cloak ng-show="inputADirty" class="uk-button uk-button-small" ng-click="processInputA()">Apply</button>
/
<input type="text"
name="input_b"
ng-model="buffer.inputB" ng-change="reportInputBTyped()"
class="uk-width-6-10 uk-form-small">
<button ng-cloak ng-show="inputBDirty" class="uk-button uk-button-small" ng-click="processInputB()">Apply</button>
</div>
// ...further inputs...
</form>
AngularJS: http://angular-meteor.com
Styles: http://getuikit.com
<button> elements seem to be of default type submit if rendered through Chrome. Not what I expected intuitively.
The W4Schools.com article states the tip:
Always specify the type attribute for the element. Different browsers may use different default types for the element.
http://www.w3schools.com/tags/att_button_type.asp
Version that works if processed by Chrome:
<form class="uk-form" ng-submit="submit()">
<div class="uk-form-row">
<input type="text"
name="input_a"
ng-model="buffer.inputA" ng-change="reportInputATyped()"
class="uk-width-3-10 uk-form-small">
<button type="button" ng-cloak ng-show="inputADirty" class="uk-button uk-button-small" ng-click="processInputA()">Apply</button>
/
<input type="text"
name="input_b"
ng-model="buffer.inputB" ng-change="reportInputBTyped()"
class="uk-width-6-10 uk-form-small">
<button type="button" ng-cloak ng-show="inputBDirty" class="uk-button uk-button-small" ng-click="processInputB()">Apply</button>
</div>
// ...further inputs...
</form>
Live Demo
Consider the following form:
<form>
<div>
<label>Status: </label>
<button ng-repeat="status in statuses"
class="btn btn-default"
ng-model="job.status.id" btn-radio="status.id">
{{ status.name }}
</button>
</div>
<div>
<label>Name: </label>
<input type="text" ng-model="job.name">
</div>
</form>
When focus is on the name field, and Enter is hit, Status is set to "All Good" for some reason. Live Demo
Why is this happening? How could I stop this side effect?
From the ngForm docs:
This is because of the following form submission rules in the HTML
specification:
If a form has only one input field then hitting enter in this field
triggers form submit (ngSubmit)
if a form has 2+ input fields and no buttons or input[type=submit]
then hitting enter doesn't trigger submit
if a form has one or more input fields and one or more buttons
or input[type=submit] then hitting enter in any of the input fields
will trigger the click handler on the first button or
input[type=submit] (ngClick) and a submit handler on the enclosing
form (ngSubmit)
Default type for the button element is "submit" (<button></button> === <button type="submit"></button>). Hence, when you hit enter, the first button is submitted.
To remedy, just put type="button" on your buttons.
<button
ng-repeat="status in statuses"
class="btn btn-default"
ng-model="job.status.id"
btn-radio="status.id"
type="button"
>
{{ status.name }}
</button>