How to concatenate a patchValue number with a string in angular forms?

Question

This is my TS

      ngOnInit() {
        this.editProfileForm = new FormGroup({
          firstNumber: new FormControl(null, {
            validators: [Validators.required],
          })
        }
      }

      fetchNumber() {
        this.nameService.fetchName().subscribe(
          () => {
            this.editProfileForm.patchValue({
              firstNumber: this.profileData.firstnumber,
            });
          },
        );
      }

my HTML

            <ion-col>
              <ion-input
                *ngIf="nameData"
                type="number"
                inputmode="numeric"
                formControlName="firstNumber"
                placeholder="First number" >
                <ion-button clear icon-only fill="clear">
                  <ion-icon [src]="icons.info"></ion-icon>
                </ion-button>
              </ion-input>
            </ion-col>

What I want to achieve is when I have my input in HTML that gets filled with the value of firstNumber to add also the string "%". I've tried with "+"

    firstNumber: this.profileData.firstNumber + "%";

, putting "%" in a variable and still doesn't work. If you guys have any if this can be done I would really appreciate it.

Answer 1

Add the % in the input field using pipe

first create the formcontrolname and bind the value in the input text

<input type="text" formControlName="amount" [value]="myform.get('controlname')|pipe">

i attached the stackbliz,kindly refer it