Ошибка: formGroup ожидает экземпляр FormGroup. Пожалуйста, передайте один. НЕ МОЖЕТЕ ПОЛУЧИТЬ ДАННЫЕ - PullRequest
Новая
       60

Ошибка: formGroup ожидает экземпляр FormGroup. Пожалуйста, передайте один. НЕ МОЖЕТЕ ПОЛУЧИТЬ ДАННЫЕ

0 голосов
/ 19 марта 2020

Я пытаюсь получить пользовательские данные из службы пользовательских методов, чтобы пользователи могли обновлять свои личные данные, но возникает ошибка, и я могу получить только поле «prenom», даже если все данные доступны, как показано на фото ниже. так вот мой код:

userProfil.TS: 

 export class UserProfileComponent implements OnInit {
      public _contactForm: FormGroup;

      constructor(
        private userSeervice: UserService,
        private tokenStorage: TokenStorageService,
        private _formBuilder: FormBuilder
      ) {}

      ngOnInit() {
        const id = this.tokenStorage.getUser().id;
        this.userSeervice.getUser(id).subscribe(data => {
          this._contactForm = this._formBuilder.group({
            id: [data.id],
            nom: [data.nom, [Validators.required]],
            prenom: [data.prenom, [Validators.required]],
            email: [data.email, [Validators.required]],
            username: [data.username, [Validators.required]]
          });
        });
      }
    }

UserPofile. HTML

<div class="main-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="card" data-aos="fade-right">
          <div class="card-header ">
            <h4 class="card-title">Editer Profil</h4>
            <p class="card-category" style="color:white;">
              compléter votre profil
              {{ _contactForm.value | json }}
            </p>
          </div>
          <div class="card-body">
            <form [formGroup]="_contactForm">
              <div class="row">
                <div class="col-md-3">
                  <mat-form-field class="example-full-width">
                    <input
                      matInput
                      formControlName="username"
                      placeholder="Username"
                    />
                  </mat-form-field>
                </div>
                <div class="col-md-4">
                  <mat-form-field class="example-full-width">
                    <input
                      matInput
                      formControlName="email"
                      placeholder="Adresse email"
                      type="email"
                    />
                  </mat-form-field>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <mat-form-field class="example-full-width">
                    <input
                      matInput
                      formControlName="nom"
                      placeholder="Nom"
                      type="text"
                    />
                  </mat-form-field>
                </div>
                <div class="col-md-6">
                  <mat-form-field class="example-full-width">
                    <input
                      matInput
                      formControlName="prenom"
                      placeholder="Prénom"
                      type="text"
                    />
                  </mat-form-field>
                </div>
              </div>

              <button
                mat-raised-button
                type="submit"
                style="background-color: #09c0a3;"
                class="btn  pull-right"
                (click)="update(_contactForm.value.id)"
              >
                Modifier Profil
              </button>
              <div class="clearfix"></div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

, и это фото, чтобы прояснить ситуацию:

, поскольку оно показывает все данные, доступные в json формат, но все еще не могу получить их

1 Ответ

0 голосов
/ 19 марта 2020

Это потому, что ваша форма загружается асинхронно.

Вы можете запретить рендеринг формы, пока служба ожидает возврата данных. 

<form *ngIf="_contactForm" [formGroup]="_contactForm">
  <!-- the form -->
</form>

Сообщение об ошибке потому что вы изначально передаете undefined в [formGroup].

...