How to conditionally set required attribute in Angular 7 - angular7

I want to apply required on certain conditions. I used the [required]= "condition" but didn't work
Here I want to apply required attribute when outlookName.outlookActionName==='Assigned' where outlook name is a dropdown and assigned is one of the value in the dropdown
<select
class="form-control"
required
name="ratingOutlook"
[(ngModel)]="ratingOutlook"
>
<option
*ngFor="let outlookName of searchCriteriaForm?.outlookDetails,index as i"
[value]="outlookName.outlookId"
>{{outlookName.outlookName}}</option
>
</select>
<div class="form-group" *ngIf="outlookCheck">
<label for="outlookFromDate">Outlook: From Date</label>
<input
class="form-control"
autocomplete="off"
name="outlookFromDate"
type="text"
required
placeholder=""
#dp="bsDatepicker"
bsDatepicker
[(ngModel)]="outlookFromDate"
[bsConfig]="{ dateInputFormat: 'DD-MMM-YYYY',showWeekNumbers: false ,containerClass: colorTheme }"
(ngModelChange)="validateOutlookDate()"
/>
</div>

Please try [attr.required]="yourBooleanVariable"

Related

cant save radio button selections to database with thymeleaf

I have form and inside I have radio button option , I have the controller class and the model. I can successfully save the other data but radio buttons options reflects to database as 0 always. I believe there is something wrong with thymeleaf radio button implementation.
<form id="add" role="form" th:action="#{/add}" method="post" th:object="${radiobutton}">
<input type="hidden" th:field="*{id}"/>
<div class="form-group">
<label>is it new</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosInline1" id="optionsRadiosInline1"
value="true" th:checked="*{isNew}"/>Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosInline1" id="optionsRadiosInline2"
value="false" th:checked="*{isNew} == false"/>No
</label>
</div>
</form>
I found it , values should be 0 or 1 instead of true and false
<form id="add" role="form" th:action="#{/add}" method="post" th:object="${radiobutton}">
<input type="hidden" th:field="*{id}"/>
<div class="form-group">
<label>is it new</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosInline1" id="optionsRadiosInline1" value="1"
th:checked="*{isNew}"/>Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosInline1" id="optionsRadiosInline2" value="0"
th:checked="*{isNew} == false"/>No
</label>
</div>
</form>

ASP.Net MVC 4 C# login form with PhantomJS and Selenium

I have a specific question, as i can't figure out how to submit form without "id" or "name" in selenium.webdriver (phantomjs) there is html logim form:
<div class="ui-helper-child-2 ui-page-column-last ui-page-column-span-12">
<div class="ui-page-column-block ui-widget-signin">
<h1>Sign In</h1>
<form action="/glo/en-us/session,create/view.html" method="post">
<div class="ui-helper-child-1">
<label class="ui-state-required" for="username">Customer ID:</label>
<input id="username" name="username" maxlength="9" type="text" value="" />
</div>
<div class="ui-helper-child-2">
<label class="ui-state-required" for="password">Password:</label>
<input id="password" name="password" maxlength="20" type="password" value="" />
</div>
<div class="ui-helper-child-3">
<label class="ui-state-required" for="companyId">Company:</label>
<select id="companyId" name="companyId">
<option selected="selected" value="glo">Choose company</option>
<option value="asp">new to asp</option>
<option value="aeg">who is it</option>
<option value="asus">who use this brand name</option>
</select>
</div>
<div class="ui-helper-child-4">
<input id="callback" name="callback" type="hidden" value="/glo/en-us/home,show/view.html?error=1" />
<input type="submit" value="Sign In" />
</div>
</form>
</div>
and one more time how to login? I can add information to by webdriver.FindElement(username) and so on, but not know how to post data as i don't have id or name in submit element.
I think this will work for you:
driver.FindElement(By.CssSelector(".ui-helper-child-4>[type='submit']")).Click();

How to add text field in front of label in jquery mobile

Can you please tell me how to add text field in front of label in jquery mobile .
There is two different types of text field in this image.How to implement this?
Just you have to copy simple code to your website...
For input box:-
<div data-role="fieldcontain">
<label for="text-12">Text input:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
For textarea:-
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
</div>
Keep that in mind the value of for="" and id="" of input box should be same...
For more details check out:- http://view.jquerymobile.com/1.3.1/demos/widgets/textinputs/
Use this code to add textfield
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="" />
Ref this docs to know more informations about JQM
http://jquerymobile.com/demos/1.2.1/docs/forms/textinputs/

How do I place text in Jquery Mobile in alignment with the controls on a form?

Jquery Mobile nicely lays out controls in a grid. I would the text "12345678" outlined in red in the image below to sit right above the textbox and left aligned. I can't see how to do it.
The image was generated with this jsfiddle: http://jsfiddle.net/958Gr/3/
By setting disabled='true' and value="12345678" you can get something decent. The account number will still show as as field, but then you can theme it differently. See this fiddle:
http://jsfiddle.net/den232/7hmYn/
Good Luck!
<div class="ui-body ui-body-b">
<div data-role="fieldcontain" data-theme='c'>
<label for="Phone" >Account ID</label>
<input id="Phone" name="Phone" type="text" disabled='true' value="12345678" />
</div></div>
<div class="ui-body ui-body-c">
<div data-role="fieldcontain">
<label for="Email">Email Address</label>
<input data-val="true" data-val-required="The Email Address field is required." id="Email" name="Email" type="text" value="" />
</div> </div>
<div class="ui-bar ui-bar-c">
<div data-role="fieldcontain">
<label for="Email">Email Address</label>
<input data-val="true" data-val-required="The Email Address field is required." id="Email" name="Email" type="text" value="" />
</div> </div>
You may Use Two-column grids as in this updated jsfiddle:link

Checking checkboxes with Capybara

Using Capybara I cannot for the life of me select a checkbox on my form.
In my request spec I've tried:
check("First Name")
page.check("First Name")
page.check("pickem_option_ids_10")
find(:css, "#pickem_option_ids_11[value='11']").set(true)
find(:css, "#pickem_option_ids_11").set(true)
Snippet from my form:
<div class="control-group check_boxes optional">
<label class="check_boxes optional control-label">Options:</label>
<div class="controls">
<label class="checkbox">
<input class="check_boxes optional" id="pickem_option_ids_10" name="pickem[option_ids][]" type="checkbox" value="10" />First Name
</label>
<label class="checkbox">
<input class="check_boxes optional" id="pickem_option_ids_11" name="pickem[option_ids][]" type="checkbox" value="11" />Middle Name
</label>
</div>
</div>
I got some of the find() ideas from this SO thread.
I've had some success in other specs where I have a single checkbox with a label of Active and I just say check("Active").
Had the same problem today, I looked around and this seemed to work:
find(:xpath, "//input[#value='10']").set(true)
of course you can replace '10' with anything you want - just check your HTML and use your value.
Hope that helps.
Capybara can't find checkbox "First Name" because your html is wrong. Your html should look like
<label class="checkbox" for="pickem_option_ids_10">First Name</label>
<input class="check_boxes optional" id="pickem_option_ids_10" name="pickem[option_ids][]" type="checkbox" value="10" />
In your view code
= label_tag "pickem_option_ids_10", "First Name"
= check_box_tag "pickem_option_ids_10", 10
Then check("First Name") should work.
Otherwise you can find("#pickem_option_ids_10").check

Resources