How to make "passed out year" field disable if the degree is not typed. May I know can we achieve it in html without .ts file use.
<div> Degree:
<input type="text" class="form-control" formControlName="degree" #degree/></div>
<div>
Passed Out Year
<input type="text" class="form-control" formControlName="passedYear"/></div>
Add this [disabled]="!formName.controls['degree'].value" in case you want any value, or this [disabled]="!formName.controls['degree'].valid" in case you want passedyear to be entered correctly.
However, if you need to implement more complex checks you may want to add custom validators.
It's not clear exactly how you are planning to use this, but you may not need to use Angular Forms if you're doing something simple. In that case you can accomplish what you need by just using ngModel like this
<div> Degree:
<input type="text" class="form-control" [(ngModel)]="degree" />
</div>
<div>
Passed Out Year
<input type="text" class="form-control" [disabled]="!degree" />
</div>
Related
So I'm trying to make a form for my assignment, and I am using the pattern attribute in html so only certain characters are required to be typed on the text box. But for some reason, the form is saying using that I'm using an incorrect format even though I made my pattern attribute that way.
Here's an example of the code and a picture of the problem.
<form>
<label for="mnumber">Mobile Number:</label>
<input type="text" required id="mnumber" pattern="[0-9]"><br><br>
<input type="submit" value="submit">
</form>
You did write:
pattern="[0-9]"
You are asking for only one number. You just forget to add '+' to accept more than one number. I guess what you are searching for is this:
pattern="[0-9]+"
pattern="[0-9]"
allows for only a single number character to validate (and be submitted). If you want to allow more than one character, here's your options:
One or more numbers:
pattern="[0-9]+"
Zero or more numbers:
pattern="[0-9]*"
One to three numbers:
pattern="[0-9]{1,3}"
you just need to change type="text" to type="number"
I try to force the validation of require in VueJs2. (without any form validation lib).
i have a field that display depending on if require element are filled. I can't find ou the good way to do this. I have sum up the situation in the code below (very simplified one)
<div>
<form>
<input required ...></input>
<input ></input>
<input required ...></input>
<input required ...></input>
<input ></input>
<label v-if="allRequiredFieldHaveContent()"> All is fine</input>
<label v-else >Some require input are empty</label>
I can't determine what to do in this allRequiredFieldHaveContent(). Any suggestion please?
NB : I can Not put some v-model on those input for reasons...
I'm trying to do something exactly like this sign up form here. They have appended their domain name as undeletable value to allow user to create a sub domain folder. I want to do the same with following input:
<input type="text" class="form-control inputlogin" name="subdomain_name" placeholder="Sub Domain" required="" value=""/>
I found a technique here but I'm not looking to append a prefix. The value must be after like in the example.
It is just a styling trick. input are either completely editable or disabled (not editable at all). There is no way to get around this.
What is done in the form you linked to is a trick where the "frozen" text is placed upon the input field so it looks as if it is a part of the actual input tag, but it is not.
Se my simple jsfiddle illustration. Look at how the styling can be used to create the illusion you want.
Here is an example using Bootstrap 3:
Bootstrap 3 Sub-domain input
<div class="container">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Your sub-domaion here">
<span class="input-group-addon" title="Type of Question">.our-domain.com</span>
</div>
</div>
</div>
how to use ng-mask for validation of phone number having pattern (xxx)xxx-xxxx . I tried using "pattern" in the input html tag but not satisfied with the result
because each time when user enters the phone number, the user must type both '()' and '-',and this will make the user annoying. So suggest a way to overcome this.
<input type="tel" name="phoneno" maxlength=13 ng-model="phone.number" pattern="^(?:\(\d{3}\)|\d{3}-)\d{3}-\d{4}$" required/></div>
This should work:
<input type="text" ng-model="phone.number" name="phone" mask="(999) 999-9999" clean="true" ng-model="phone">
I am trying to use multiple patterns for an input-field in HTML5.
<input type="text" pattern="\d*.{5,10}" name="plz">
My current input field does not work. Only the second pattern .{5,10} is relevant for the submit. The first attribute \d* hast no effects.
Try the below:
<input type="text" placeholder="" class="form-control" pattern="([0-9]{2})([0-9]{2})([0-9]{2})([0-9]{4})([0-9]{1})">
and just accept AESE640526HOCCNL05...
Hope this can help you.