how to take default value in angular Reactive Form

Question

How to take default value in Reactive Form ,I got the {{demo.memName}} is null , i know because memberName has initialize null value , may i know how can i get the {{demo.memName}} real value

i had try reference How to take default value in Reactive Form but same not work for me

My Code:

this.retrieveData = fb.group(   {
    'memberName': ['', Validators.required],      } ) } ...   ngOnInit(){     let url = http://localhost/api/

      this.http.get(url).subscribe({        next:(res:any)=>{
          this.market = res[0];
          this.marketArr = JSON.parse(JSON.stringify(res));
          this.showmap()        },      error:(err:any)=> {
          this.marketArr = err

..... My Html

  <form [formGroup]="retrieveData " (ngSubmit)="memInfo(retrieveData.value)" class="ui form">
  <mat-form-field class="name">
    <mat-label >Info.</mat-label>
    <input type="number" value="{{demo.memName}}"  matInput formControlName="memName" >
  </mat-form-field>

Answer 1

One way can be define a function like

setForm(data:any=null)
{
   data=data || {menName:'',property1:'',property2:'',...}
   return new FormGroup({
       menName:new FormControl(data.menName,Validators.required),
       property1:new FormControl(data.property1),
       ...
   })
}

So, if you use

retrieveData=this.setForm() //you get a formGroup with the "default values"

If you use a service to get Data

   this.service.getData().subscribe((res:any)=>{
         //you create a form with the data received from the service
         this.retrieveData=this.setForm(res) 
   })   

NOTE: It's a better practice use always a service to get/update the data, not use httpClient inside a component. In this way you have separate the part of the component from the part of access to the dbs. This allow test your component, or change the service (you can first simply return data create hardcode or read from a .json or read from one API or from another API...). e.g. imagine you received the data from the API in the way

[{menName:'my menName'}]

Your service is

   getData()
   {
      return this.httpClient.get("myurl").map((res:any)=>res[0])
   }

Now, you change your API and return some like

{
result:{menName:'my menName'}
}

You only need change the service

   getData()
   {
      return this.httpClient.get("myurl").map((res:any)=>res.result)
   }

Or received some like

   {menName:'my menName'}

Again you change the service

   getData()
   {
      return this.httpClient.get("myurl")
   }

See that you have no to change the component. If your component work before all this changes, it is going to work always.

Answer 2

set a default value for a form control in Reactive Forms, you can pass the default value as the second argument to the FormControl constructor when creating the control.

For example, to set the default value of the memberName control to the value of demo.memName

Component.ts

this.retrieveData = fb.group({
  'memberName': [this.demo.memName || '', Validators.required]
});

Component.ts

<form [formGroup]="retrieveData" (ngSubmit)="memInfo(retrieveData.value)" class="ui form">
  <mat-form-field class="name">
    <mat-label>Info.</mat-label>
    <input type="number" matInput formControlName="memName">
  </mat-form-field>
</form>

I hope it's helps !