Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

199
Views
Input is not showing the Angular´s reactive form value

I´m building up an Angular basic CRUD app for try new things, but wish to know why this is happening.

I´m trying to get the "post" data and I do from a service, this is working fine, the problem is when I´m setting up the form, show the rest of the values, but not the user ID.

This is the code:

HTML

<div class="container">
    <h1 class="hidden__content">Modify register</h1>
    <div class="row new__register__form__wrapper mt-5">
        <h3 class="mb-5">Modify register</h3>
        <form [formGroup]="editRegisterForm" (ngSubmit)="editRegister()">
            <div class="form-group mb-3">
                <input type="text" class="form-control" id="userIdInput" formControlName="user" readonly>
            </div>
            <div class="form-group mb-3">
                <textarea class="form-control" id="titleInput" cols="30" rows="3" placeholder="Write here the title of your post" formControlName="title"></textarea>
            </div>
            <div class="form-group form-check mb-3">
                <select class="form-select" name="completedSelect" id="comletedSelect" formControlName="completed">
                <option value="default" hidden>Choose an option</option>
                <option value="completed">Completed</option>
                <option value="no completed">Not completed</option>
              </select>
            </div>
            <button type="submit" class="btn btn-outline-primary new__register__form__submit">Update register</button>
        </form>
    </div>
</div>

TypeScript

 ngOnInit(): void {
    this.registerId = this.route.snapshot.paramMap.get('id');
    this.todosService.getAllRegistersById(this.registerId).subscribe((res: any) => {
      this.editRegisterForm = this.initEditForm(res);
    });
  }

 initEditForm(response: any){
    const { user, title, completed } = response;
    let status;
    completed === true? (status = 'completed'): (status = 'no completed');
    return this.fb.group({
      user: [user, [Validators.required]],
      title: [title, [Validators.required, Validators.maxLength(199)]],
      completed: [status, [Validators.required]]
    });
  }
about 4 years ago · Santiago Trujillo
2 answers
Answer question

0

Try injecting ChangeDetectorRef in constructor and run markforcheck() after form is initialized.

about 4 years ago · Santiago Trujillo Report

0

I would suggest a different approach.

  • Don't try to reassign a value to editRegisterForm, but instead inside initEditForm, you can do the following:
      this.editRegisterForm.get('user').setValue(yourUserValue);
      this.editRegisterForm.get('title').setValue(yourTitleValue);
      this.editRegisterForm.get('completed').setValue(yourCompletedValue);

This way you're going to update your FormControl's values. Otherwise your approach is probably causing an issue with change detection and I don't see a point to reassign the value of your FormGroup, when you're just trying to update your field's values and there's an API defined for that.

about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!