입력 기본값을 설정할 수 없음 (Angular)

debugcn 에 게시 Dev

페르 니 두이

각도 형식을 사용하는 웹 페이지가 있습니다. 이 페이지는 기본적으로 사용자 데이터이므로 사용자의 이름, 전화 번호, 메일 등을 보여 주며, 데이터는 mongoDB 데이터베이스를 사용하여 가져옵니다. 기본적으로 자리 표시 자에 이미 설정된 값을 표시하고 사용자도 변경할 수 있기를 바랍니다. 필드에 아무것도 입력하지 않으면 전달되어야하는 값이 자리 표시 자입니다. 예를 들어 {{this.cliente.nome}} 값이 입력 필드와 다른 필드에 있지만 입력 기본값으로 사용하려고하면 작동하지 않습니다. 다른 하나가 작동하면 "Undefined의 'nome'속성을 읽을 수 없습니다."라고 표시됩니다. mongoDB에서 데이터가 올바르지 만 작동하지 않습니다. 이것은 내 코드입니다.

import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';
import { User } from 'src/user';
import { FormGroup, FormControl, FormArray, FormBuilder } from "@angular/forms";
import { Router } from '@angular/router';

@Component({
  selector: 'app-cliente-dados',
  templateUrl: './cliente-dados.component.html',
  styleUrls: ['./cliente-dados.component.css']
})
export class ClienteDadosComponent implements OnInit {

  cliente: User;
  updateForm: FormGroup;

  constructor(
    private userService: UserService,
    private formBuilder: FormBuilder,
    public router: Router
  ) { 
    this.updateForm = this.formBuilder.group({
      nomeUpdate: this.formBuilder.control("")
    })
  }

  ngOnInit(): void {
    this.getCliente();
  }

  getCliente(){
    this.userService.getUser(localStorage.getItem('userAtual')).subscribe(user => {
      this.cliente = user[0];
    }); 
  }

  updateCliente(updateData){
    console.log("update");
  }

}

<form [formGroup]="updateForm" (ngSubmit)="updateCliente(updateForm.value)">
    <div class="data">
        <img id="iconePerfil" src="assets/Imagens/Icones/perfil.png">
        <div id="informacaoRegisto">
            <div class="container">
                <label id="nome"><strong>{{this.cliente.nome}} <!--This one shows the value--></strong></label>
                <input class="input" type=" text " [(value)]="this.cliente.nome" formControlName="nomeUpdate"> <!--Here the value isn't shown-->
                <span class="border"></span>
            </div>
           </div>
          </div>
          <button type="submit" class="submit">Atualizar Dados</button>
          </form>

문제의 표현 : 상하 값이 표시됨 (입력란이 아님) 중간 값이 표시되지 않음 (기본값이있는 입력란)

T. Sunil Rao

귀하는 사용 FormBuilder하고 있으므로의 value속성은 input사용되지 않습니다. 초기 값은FormControl

다음을 제거하십시오. constructor

this.updateForm = this.formBuilder.group({
  nomeUpdate: this.formBuilder.control("")
})

수정 getCliente()

getCliente(){
  this.userService.getUser(localStorage.getItem('userAtual'))
  .pipe(first()).subscribe(user => {
    this.cliente = user[0];
    this.updateForm = this.formBuilder.group({
      nomeUpdate: this.formBuilder.control(this.cliente.nome)
    })
  }); 
}

.pipe (first ())를 추가하여받은 첫 번째 값만 사용됩니다.

도움이 되었기를 바랍니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사