I'm linting my Angular templates with plugin:prettier/recommended and this kind of styling:
<label class="control-label"
[for]="id">
</label>
Brings up this warning on the first line:
Insert `␍⏎·` (eslintprettier/prettier)
And this on the second line:
Delete `········` (eslintprettier/prettier)
After the fix, it looks like this:
<label
class="control-label"
[for]="id">
</label>
Is there a way to tell Prettier config to have the first attribute inline with the tag, and ident everything else accordingly?
Related
I need the value that is obtained from my db is selected. Inspect in html, I see that the value of one of the <option> changes to: selected="selected" but in the select it is not really selected.
Here is my code:
<select chosen class="form-control" name="state" ng-model="product.state" ng-change="updateData()" placeholder-text-single="'Select one'" required >
<option value="">Select one</option>
<option ng-repeat='i in statesList' value="{{i.id}}" ng-selected="i.id == product.state.id">{{i.name}}</option>
</select>
I tried to change the value of ng-model by ng-model="product.state.id" and it works, it stays selected, but of course, the data is not saved later.
statesList is the array of objects that are retrieved from a mongodb database collection.
I have read other similar questions but I can not solve my problem with them. I am new at angular and there are complicated problems for me. What solution is there? How can i fix it?
No need to have ng-change handler.
Try below approach by using ng-options. The model will always have latest selected value.
<select name="state" id="state"
ng-options="option.name for option in statesList track by option.id"
ng-model="product.state"></select>
In my project i have handled selects control with Reactive form, you can try like this
this.testForm = this.formBuilder.group({
"testselectControl": []});
in html
<select id="test1" formControlName="testselectControl"
class="form-control p-0 start-date-input-box ">
<option *ngFor="let val of listValues" [value]="val.id">
{{name.name}}</option>
</select>
when you receive data set value like this
this.testForm .get("testselectControl").setValue(listValues ? (listValues.find((value) => (value.id.trim() ==selectedValueId) : "0");
<select multiple ui-select2="{allowClear: true}" ng-
model="selectedCountries" data-placeholder="Countries">
<option ng-repeat="country in countries" value="{{country.id}}">
{{country.name}}</option>
</select>
<button ng-click="fetch()" class="btn btn-primary pull-right">Apply</button>
the solution of adding priority worked
I have a form that spans multiple tabs in a TabStrip control. However, when the form is validated (e.g. f.valid), not all controls are considered when the validation is evaluated.
For example, if an input field is on tab 1 that is marked as "required" and the save action is called when the focus is on tab #3, the form will read as invalid since the required field is not in view. If the focus is on Tab #1, all works as expected.
I understand why this behavior is occurring, but I wanted to see if there was any suggested workaround.
Thanks!
Update
I created a plunkr that shows the basic issue. It is actually a little backwards from the problem I described, but it shows how the form ignores the fields on tabs other than the one displayed during validation: Plunkr Example
The template code looks like this:
<form #f="ngForm" (ngSubmit)="save(f)">
<kendo-tabstrip>
<kendo-tabstrip-tab [title]="'Paris'" [selected]="true">
<ng-template kendoTabContent>
<input type="text" name="controlOne" id="controlOne" [(ngModel)]="myModel.controlOne" required>
</ng-template>
</kendo-tabstrip-tab>
<kendo-tabstrip-tab [title]="'New York City'">
<ng-template kendoTabContent>
<input type="text" name="controlTwo" id="controlTwo" [(ngModel)]="myModel.controlTwo">
</ng-template>
</kendo-tabstrip-tab>
<kendo-tabstrip-tab [title]="'Tallinn'">
<ng-template kendoTabContent>
<input type="text" name="controlThree" id="controlThree" [(ngModel)]="myModel.controlThree">
</ng-template>
</kendo-tabstrip-tab>
</kendo-tabstrip>
<button type="submit">Save changes</button>
</form>
<div>
Valid when saving: {{ isValid }}
</div>
I have this below golang template code snippet where I take values from a map of type map[string]interface{} and check if that string is empty or not but my string empty check is failing as:
template: apps.html:62:29: executing "apps.html" at <eq $src "">: error calling eq: invalid type for comparison . I tried to print the empty value also and it is rendered as <nil> but my {{if eq $src "<nil>"}} check is also failing and even if I put nil then also it fails. Is there any better way to achieve this.
{{$src := (index . "source")}}
{{$tar := (index . "target")}}
{{if eq $src ""}}
<div></div>
{{else}}
<div style="display:none;">
<input id="username" name="source" value="{{ $src }}"/>
<input id="username" name="target" value="{{ $tar }}"/>
</div>
{{end}}
Here is what you're doing (always better to give an example play.golang.org link if possible):
https://play.golang.org/p/uisbAr_3Qy
A few problems with what you're doing: If you're using a map for context, you don't need to use index at all, so your variables are not required. If you want to check if a key exists, just check for a nil entry with if. If your map contains elements of type interface, you can't compare with a string, only use eq when you're sure you have an element but are not sure what it might be, and wrap it in an if test if unsure whether the key exists.
I think you want to do something like this:
{{if .source }}
<div style="display:none;">
<input id="username" name="source" value="{{ .source }}"/>
<input id="username" name="target" value="{{ .target }}"/>
</div>
{{else}}
<div>empty</div>
{{end}}
https://play.golang.org/p/D2DCjAklFE
See the docs for text/template as they have a lot more detail:
https://golang.org/pkg/text/template/#hdr-Actions
If you want to compare with null(nil) use: https://github.com/Masterminds/sprig/issues/53#issuecomment-483414063
{{ kindIs "invalid" $value }}
In PHPStorm, when creating a snippet, you can do something like this:
<!-- $VALUE$ Form Input -->
<div class="form-group">
<input type="text" name="$NAME$" class="form-control">
</div>
With variables and such, so you can easily write a value. I'm wondering how to do the same thing with Sublime Text 3. This is what I have in my CDATA tag:
<!-- $VALUE Form Input -->
<div class="form-group">
<input type="text" name="$NAME" class="form-control">
</div>
However, it's not working.
Unfortunately, the only variables that are available in snippets are specified in the docs under snippets environment-variables, as well as any you declare in a .tmPreferences metadata file, or in a .sublime-options file. However, you can have predefined values in snippets. For example, this snippet:
<snippet>
<content><![CDATA[<!-- ${1:VALUE} Form Input -->
<div class="form-group">
<input type="text" name="${2:NAME}" class="form-control">
</div>$0]]></content>
<tabTrigger>form_group</tabTrigger>
<scope>text.html</scope>
</snippet>
gives this result when triggered:
You can then hit Tab and the focus will move from field 1 to field 2:
and again to move to the exit point $0:
I have this code
<label>
<input type="radio" checked="checked" value="fOejPdlZIx83HA" name="btnRad">
Test1
</label>
<label>
<input type="radio" checked="checked" value="fdsaf4waff4sssd" name="btnRad">
Test2
</label>
<label>
<input type="radio" checked="checked" value="fg43fasd43wsat4" name="btnRad">
Test3
</label>
I wish to access the radio button depending on the label text via xpath
I already tried multiple thing:
//input[#name='btnRad]']/following::*[contains(text(),'Test3')]
//label[text()='Test3']/input[#name='btnRad']
//*[contains(text(),'Test3')]
Even the last one return me nothing, so xpath think that "Test3" is not the text of the label... anyone have an idea how to do this?
Your expression is failing because your label has more that one text node: an empty string before the input, and Test3. The way you're using contains means it will only check the first text node, ie empty string.
Two ways of solving this:
eliminating the empty strings with normalize-space():
//*[contains(text()[normalize-space()], 'Test3')]
querying each text():
//*[text()[contains(.,'Test3')]]
For a more detailed explanation, see How to search for content in XPath in multiline text using Python?.
This works also //label[contains(.,'Test3')]/input .