How can I get and separate data from database into to text box? Angular

Question

I have 2 textboxes AuthorizeRep1Fname and AuthorizeRep1Lname. I'm combining it together on typescript before I put it on 1 column in database which is AuthorizeRep1Name. Look at the photo below that's the result.

I'm using this to register and combine first name and last name.

this.Profile.AuthorizedRep1Name = (this.Profile.AuthorizedRep1FName + ' ' + 
this.Profile.AuthorizedRep1LName);
this.ProfileService.UpdateProfile(this.Profile).then(
  (response) => {
    console.log(this.Profile)
   }

Here's my html.

<div class="row mx-auto">
<div class="col-sm-12 col-md-6 col-lg-6">
    <div class="input-container">
        <label for="Representative1">* First Name </label>
        <input name="r1fname" #r1fname="ngModel" id="Representative1Fname" type="text" [(ngModel)]="Profile.AuthorizedRep1FName" pInputText required/>
        <div class="errortxt" [hidden]="r1fname.valid || r1fname.pristine" class="alert alert-danger">
            <div class="errortxt" [hidden]="!r1fname.hasError('required')">First Name is Required!</div>
        </div>
    </div>
</div>

<div class="col-sm-12 col-md-6 col-lg-6">
    <div class="input-container">
        <label for="Representative1">* Last Name </label>
        <input name="r1lname" #r1lname="ngModel" id="Representative1Lname" type="text" [(ngModel)]="Profile.AuthorizedRep1LName" pInputText required/>
        <div class="errortxt" [hidden]="r1lname.valid || r1lname.pristine" class="alert alert-danger">
            <div class="errortxt" [hidden]="!r1lname.hasError('required')">Last Name is Required!</div>
        </div>
    </div>
</div>

My problem is I can't separate and display the data from database to my two textboxes I can only display when I use ngModel AuthorizeRep1Name instead of AuthorizeRep1Fname and AuthorizeRep1Lname. Here's my get function.

GetProfileByID(UserID: any) {

this.ProfileService.GetProfileByID(UserID).then(
(response) => {
  this.Profile = response.Body;
  }
)
}

Make it two fields in the database. Else you need to split your name, but how do you know at which position to split, etc (what happens with double names and so on...) — Stefan, Feb 13 '19 at 09:01
I can't make any changes on the database many component will be affected — John Roy, Feb 13 '19 at 09:26
Then you can't make two fields into one field into two fields again. Or you use the spliting example below but you will have a lot of other problems with it (e.g double names) — Stefan, Feb 13 '19 at 09:28

Monkey D. Luffy · Answer 1 · 2019-02-26T14:38:02.443

You're sending data as Combination of two strings so result you're getting is single string. But as you're inserting empty space in those combination of two Strings what you could do is check for Occurrence of empty blank space using split() function of angular after receiving response from database.

Suppose you're two strings are "hey" "Hello" so Database will have hey Hello. So after getting that string store it to variable suppose :

let stringSplit = this.Profile; // profile variable which will store response from database and which will have string **hey hello**

then

let sepratedArray = stringSplit.split(" "); //where space is the separation character

then check value of sepratedArray as array index

i.e. console.log(sepratedArray[0]); //will print **hey**

and

i.e. console.log(sepratedArray[1]); //will print **Hello**

Happy Coding ☻

For more information you can check this thread [Split text based on occurrence of particular character](https://stackoverflow.com/questions/44900110/split-string-based-on-spaces-and-read-that-in-angular2) — Monkey D. Luffy, Feb 13 '19 at 09:27

How can I get and separate data from database into to text box? Angular

1 Answers1