0

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

  1. there is 2 fields - a)input fields b) select field
  2. In input field it is based on a 15 digit field. in that 13,14,15th character will be alphabets
  3. In second field, there is two select options. i) public sector ii) private sector
  4. 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

Maciej Wojcik
  • 2,115
  • 2
  • 28
  • 47
K.Kishore
  • 13
  • 1
  • 9

2 Answers2

1

You can do something like below:

<input type="text" [(ngModel)]="model.inputField" 
(blur)="model.inputField.substr(12) == 'GOI' ? 
 model.selectField ='PS' : ''" name="inputField">

<select [(ngModel)]="model.selectField" 
   name="selectField">
  <option value="PS">Public Sector</option>
  <option value="PVS">Private Sector</option>
</select>

When user will enter data in input field then on blur event we can check the last three characters using substr method and if the condition is true then the select field will populate with public sector else user can select on it's own.

Hope this helps.

Kartik Gogia
  • 57
  • 6
  • thank you for the reply. I have a question. "model.inputField.substr(12) == 'GOI'" in this line you mentioned only 12th character. what about next two char? – K.Kishore Aug 18 '22 at 11:29
  • If we pass only 1 argument in the substr method that is the startindex of the string then it will return the charcters from startIndex to length of the string, so in this case method will return 'GOI' – Kartik Gogia Aug 18 '22 at 11:34
  • inside the ngModel , you called model right. what that is? how to use it in .ts file – K.Kishore Aug 18 '22 at 12:37
  • You can create a separate model class with properties (Basically a object), and then can declare a variable of model class in your .ts file and can use it in the html file. OR You can create two different variables in .ts file one for input and one for select then you don't need to do model.inputField, you can directly access the variable in html file. And yes use substring, substr is depreciated. – Kartik Gogia Aug 18 '22 at 12:55
1

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?)

Smirgal
  • 46
  • 2
  • thanks for the comment. in this the select options are fetched from .ts file. not is html file. so could u please change the answer – K.Kishore Aug 18 '22 at 12:31
  • It is okay like this to represent the problem. If you want to know how to use options from the ts file or other basic angular things i would recommend the tour of heroes (https://angular.io/tutorial). – Smirgal Aug 18 '22 at 12:48
  • substring(12, 15), it will get the values of ? 12,13,14,15?? – K.Kishore Aug 18 '22 at 12:56
  • The first index is 0. If you want the 13th to 15th char you need the 12th to 14th index. https://www.w3schools.com/jsref/jsref_substring.asp – Smirgal Aug 18 '22 at 13:05
  • [selected]="containsGOI" , is not working . I am using mat-option. I used ng-selected. this is also not working – K.Kishore Aug 18 '22 at 13:10
  • Angular Material mat-select is different from the normal select. Please provide this information to your question next time. https://stackoverflow.com/questions/57991426/how-to-use-mat-select-with-property-selected – Smirgal Aug 18 '22 at 13:14