Estoy creando una aplicación CRUD básica de Angular para probar cosas nuevas, pero deseo saber por qué sucede esto.
Estoy tratando de obtener los datos de "publicación" y lo hago desde un servicio, esto funciona bien, el problema es que cuando estoy configurando el formulario, muestra el resto de los valores, pero no la identificación del usuario.
Este es el código:
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>Mecanografiado
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]] }); }Intente inyectar ChangeDetectorRef en el constructor y ejecute markforcheck() después de inicializar el formulario.
Yo sugeriría un enfoque diferente.
editRegisterForm , pero dentro de initEditForm , puede hacer lo siguiente: this.editRegisterForm.get('user').setValue(yourUserValue); this.editRegisterForm.get('title').setValue(yourTitleValue); this.editRegisterForm.get('completed').setValue(yourCompletedValue);De esta manera, actualizará los valores de su FormControl. De lo contrario, su enfoque probablemente esté causando un problema con la detección de cambios y no veo el punto de reasignar el valor de su FormGroup, cuando solo está tratando de actualizar los valores de su campo y hay una API definida para eso.