angular реактивные формы бросают «Не удается найти элемент управления с именем» для не относящегося к делу поля модели

Question

Я пытаюсь создать компонент редактирования с Angular Реактивными формами. Тем не менее я получаю сообщение об ошибке «Ошибка: не удается найти элемент управления формы с именем: создан." к форме. Я не указываю это в моем конструкторе форм, и на моей странице редактирования нет элемента управления. html. Это присутствует только на моей модели. Как мне сказать, что средство проверки формы игнорирует это и другие несоответствующие свойства модели?

Вот моя модель:

        export class User {
      id: number;
      userName: string;
      password: string;
      passwordHash: string;
      lastName: string;
      firstName: string;
      email: string;
      created: string;
      lastLogin: string;
      description: string;
      isSaved: boolean;
      passsword:string;
      passwordConfirm:string;
    }

Вот мой компонент:

    import { Component, OnInit, Inject } from '@angular/core';
import { Router } from "@angular/router";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { first } from "rxjs/operators";
import { User } from "../../model/user.model";
import { UserService } from "../../service/user.service";


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

  user: User;
  editForm: FormGroup;

  constructor(private formBuilder: FormBuilder, private router: Router, private userService: UserService) { }

  ngOnInit() {
    let userId = window.localStorage.getItem("editUserId");
    if (!userId) {
      alert("Invalid action.")
      this.router.navigate(['list-user']);
      return;
    }
    this.editForm = this.formBuilder.group({
      id: [''],
      userName: ['', Validators.required],
      password: ['', Validators.required],
      passwordConfirm: ['', Validators.required],
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      email: ['', Validators.email],
      description: [''],
    });
    this.userService.getUserById(+userId)
      .subscribe(data => {
        this.editForm.setValue(data);
      });
  }

  onSubmit() {

    if(!this.editForm.value.passwordConfirm){
      console.log("password confirmed is undefined. Setting");
      this.editForm.value.passwordConfirm = this.editForm.value.password;
    }

    this.userService.updateUser(this.editForm.value)
      .pipe(first())
      .subscribe(
        data => {
          alert('User updated successfully.');
          this.router.navigate(['list-user']);
        },
        error => {
          alert("En error occured and changes should not be saved. Details: " + error);
        });
  }
}

Вот мой html:

        <div class="col-md-6 user-container">
          <h2 class="text-center">Edit User</h2>
          <form [formGroup]="editForm" (ngSubmit)="onSubmit()">

            <div class="hidden" style="display:none;">
              <input type="text" formControlName="id" placeholder="id" name="id" class="form-control" id="id">
            </div>

            <!-- todo: replace display none with bootstrap class -->

            <div class="form-group" style="display:none;">
              <input type="text" formControlName="userName" placeholder="userName" name="userName" class="form-control"
                id="userName" readonly="true">
            </div>

            <div class="form-group">
              <label for="firstName">First Name:</label>
              <input formControlName="firstName" placeholder="First Name" name="firstName" class="form-control" id="firstName">
            </div>

            <div class="form-group">
              <label for="lastName">Last Name:</label>
              <input formControlName="lastName" placeholder="Last name" name="lastName" class="form-control" id="lastName">
            </div>

            <div class="form-group">
              <label for="email">Email:</label>
              <input formControlName="email" placeholder="email" name="email" class="form-control" id="email">
            </div>

            <div class="form-group">
              <label for="description">Description:</label>
              <input formControlName="description" placeholder="Description" name="description" class="form-control"
                id="description">
            </div>

            <hr>

            <h5>Change password</h5>

            <div class="form-group">
              <label for="password">New password:</label>
              <input type="password" formControlName="password" placeholder="password" name="password" class="form-control"
                id="password">
            </div>

            <div class="form-group">
              <label for="passwordConfirm">Confirm password:</label>
              <input type="password" formControlName="passwordConfirm" placeholder="passwordConfirm" name="passwordConfirm"
                class="form-control" id="passwordConfirm">
            </div>

            <button class="btn btn-success">Update</button>
          </form>
        </div>

Вот ошибка подробности:

Ошибка: не удается найти элемент управления формы с именем: создан. core. js: 5847 сообщение: «Не удается найти элемент управления формы с именем: создан.» stack: "Ошибка: не удается найти элемент управления формы с именем: создан. \ n в FormGroup._throwIfControlMissing (https://localhost: 5001 / vendor. js: 70056: 19 ) \ n в https://localhost: 5001 / vendor. js: 69913: 19 \ n в Array.forEach () \ n в FormGroup.setValue (https://localhost: 5001 / vendor. js: 69912: 28 ) \ n в SafeSubscriber._next (https://localhost: 5001 / main. js: 1937: 28 ) \ n в SafeSubscriber .__ tryOrUnsub (https://localhost: 5001 / vendor . js: 95425: 16 ) \ n в SafeSubscriber.next (https://localhost: 5001 / vendor. js: 95363: 22 * ​​1035 *) \ n в Subscriber._следующий (https://localhost: 5001 / поставщик. js: 95309: 26 ) \ n по адресу Subscriber.next (https://localhost: 5001 / поставщик. js: 95286: 18 ) \ n на MapSubscriber._next (https://localhost: 5001 / vendor. js: 100330: 26 ) "

Answer 1

Angular Реактивные формы принимают только те значения, которые присутствуют в построителе форм. Если у вас есть какие-то дополнительные свойства в объекте, которые вы используете для установки значений, это дает ошибку для этого свойства. Здесь у вас есть created как дополнительное, если вы как-то решили эту ошибку, она снова выдаст ошибку lastLogin, поскольку она не является частью построителя форм.

this.userService.getUserById(+userId)
  .subscribe(data => {
   const propertyToSelect = ['id','userName', 'password','passwordConfirm', 'firstName', 'lastName','email', 'description']
   const objectToSetValue = propertyToSelect.map((property) => {property: data[property]})
   this.editForm.setValue(objectToSetValue);
  });

Answer 2

Похоже, что вы хотите установить в форму объект User, который не имеет элемента управления с именем created.

. Вы можете либо удалить это поле из объекта, который вы передаете setValue или вместо setValue используйте patchValue, который, кажется, игнорирует неизвестные поля, а также касается только тех элементов управления, которые указаны в переданном объекте, и оставляет другие элементы управления в покое, в отличие от * 1008. *, которые сбрасывают те элементы управления, которые не указаны в переданном объекте.