Issue
Basically I am a beginner to Angular as well as typescript. Here am trying to validate a Reactive form Text field with some conditions.
my condition is
- there is 2 fields - a)input fields b) select field
- In input field it is based on a 15 digit field. in that 13,14,15th character will be alphabets
- In second field, there is two select options. i) public sector ii) private sector
- if the 13,14,15th alpahabet is 'GOI' means, in select field automatically it should be selected as 'public sector' or else user can select their options in select field.
someone help me out !
Thanks in advance
Solution
I would seperate the logic from the HTML.
In the HTML you would have your input and the select:
<input type="text" [(ngModel)]="inputValue" (ngModelChange)="checkGOI()" />
<select>
<option value="PS">Public Sector</option>
<option value="PVS">Private Sector</option>
</select>
In the .ts file you now need a variable "inputValue" and function which checks, if the digits 13,14 an 15 are equal to GOI and sets the result to a boolean:
public inputValue: string = '';
public containsGOI: boolean = false;
public checkGOI(): void {
this.containsGOI = this.inputValue.substring(12, 15) === 'GOI';
}
Now you can modifiy the select and the option like this:
<select [disabled]="containsGOI">
<option value="PS" [selected]="containsGOI">Public Sector</option>
<option value="PVS">Private Sector</option>
</select>
If the inputValue contains GOI, the select is disabled and PS is selected.
Also keep in mind, that substr is deprecated (Why is String.prototype.substr() deprecated?)
Answered By - Smirgal
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.