How to send the value of web api in hidden form fields in Angular

Question

I have an Angular application which gets data from a web api. I also have a form in my page, which has a hidden field which needs to send the value from that api: number. I have tried the following code but it is not working:

ts.component file.

receivedIncident: any;

number: any;

constructor(private service: nowService,
        private appComponent: AppComponent,
        private userService: UserService,
        private router: Router,
        private http: HttpClient,
        private route: ActivatedRoute
      ) {
        this.receivedIncident = { number: '', opened_at: '', description: '', short_description: ''}; this.receivedLocation = {city:null, country: null}
      }

    private getIncident() {
        this.service.getIncident(this.s_id, this.c_id).subscribe((data) => {
          this.loading = true;
          console.log('Result - ', data);
          console.log('incident data is received');
          this.loading = true;
          this.receivedIncident = data.result[0];

        })
      }

ngOnInit() {
    this.loading = true;
    this.getIncident();
    this.loading = true;
      })
      this.addCommentsForm = new FormGroup({
        comment: new FormControl(''),
        c_id: new FormControl(this.customer_id),
        number: new FormControl(this.receivedIncident.number),
      })
    }

html form field

<input name="number" class="form-input" type="hidden" id="number" value="number

Any ideas?

Create form first before doing the API call. If your input is in a form then add `formControlName='number'` to the input, if not then add the `formControl` as an input property to the input — Ashish Ranjan, Apr 10 '19 at 11:33

score 1 · Accepted Answer · answered Apr 10 '19 at 11:43

i had the exact problem that you mention here. for doing that thing , you can use setValue method. it does exactly that you want. this is the document:

https://angular.io/api/forms/FormControl

and here is the simple answer :

Manually Set Value for FormBuilder Control

i hope it works for you.

score 0 · Answer 2 · answered Apr 10 '19 at 11:35

0

You should add formControlName in your input field in html template.

<input name="number" class="form-input" formControlName="number" id="number" value="number [hidden]="true"/>

answered Apr 10 '19 at 11:35

SKG

510
4
20

How to send the value of web api in hidden form fields in Angular

2 Answers2