Блог

Я в замешательстве FormGroup .

Класс обладает следующими свойствами:

 formValue!: FormGroup;
employeeModelObj: EmployeeModel = new EmployeeModel();
employeeData!: any;
 

и в Нгоните у него есть:

 ngOnInit(): void {
  this.formValue = this.formBuilder.group({
    firstName: [''],
    lastName: [''],
    emailId: [''],
    phoneNumber: [''],
    salary: [''],
  });
}
 

и при добавлении новых сведений о сотруднике у него есть это

 postEmployeeDetails() {
    this.employeeModelObj.firstName = this.formValue.value.firstName;
    this.employeeModelObj.lastName = this.formValue.value.lastName;
    this.employeeModelObj.emailId = this.formValue.value.emailId;
    this.employeeModelObj.phoneNumber = this.formValue.value.phoneNumber;
    this.employeeModelObj.salary = this.formValue.value.salary;
}
 

Извините, я не могу разобраться самостоятельно, но в чем смысл присвоения класса FormGroup свойству formValue? И почему мы должны создавать employeeModelObj и присваивать ему значения?

И что делает FormBuilder.group? и почему мы присваиваем ему значение formValue с инициализацией ничего?

В чем смысл присвоения класса FormGroup свойству formValue?

Это делается для создания дескриптора для вашего основного объекта формы.

Почему мы должны создавать employeeModelObj и присваивать ему значения?

На самом деле вам не нужно этого делать, вы можете использовать formValue объект для передачи в свою функцию, чтобы сохранить объект или все, что вы хотите с ним сделать.

Что делает FormBuilder.group?

Это FormBuilder объект, который помогает вам создать структуру вашей формы. .group Функция создает основной объект, содержащий все значения. На самом деле вы можете вложить их в aswel, чтобы создать объекты внутри основного объекта формы, например, для адреса (улица, номер, город).

Например:

 this.formValue = this.fb.group({
  firstName: [''],
  address: this.fb.group({
    street: [''],
    number: [''],
    city: ['']
  }),
  email: ['']
});
 

Существует также .array , который создает массив внутри вашей структуры формы.

Без конструктора форм вам также пришлось бы пройти через эту боль перед инициализацией элементов управления формами:

 this.formValue = new FormGroup({
  firstName: new FormControl(),
  lastName: new FormControl(),
  emailId: new FormControl(),
  phoneNumber: new FormControl(),
  salary: new FormControl()
});
 

Другими словами, это избавляет вас от необходимости писать много кода котельной плиты.

Почему мы присваиваем ему значение formValue с инициализацией ничего?

Это делается для того, чтобы при инициализации объекта формы для входных данных были установлены пустые строки.

FormGroup используется для создания своего рода объекта, который обновляется с учетом значений полей ввода. В вашем примере это значение.formValue привязано к форме в вашем html-файле.

Когда поле ввода в этой форме будет обновлено, это значение.formValue также будет обновлено.

Например, если в вашей форме есть ввод, который принимает имя, при изменении этого ввода это.formValue.ценность.Имя также изменится. Это простая концепция