Góc 2: ReactiveForm Cập nhật Mô hình

Question

Tôi có biểu mẫu phản hồi mà tôi muốn điền trực tiếp vào mô hình của mình.

form.component.html

<form [formGroup]="personForm" (ngSubmit)="savePerson()"> 
    <md-card class="app-input-section"> 
     <md-input formControlName="personName" placeholder="Person Name"></md-input> 
     ... many more fields 
     <button md-raised-button color="primary">Save</button> 
    </md-card> 
</form> 

form.component.ts

@Component({ 
    selector: 'person', 
    template: 'form.component.html' 
}) 

export class FormComponent implements OnInit { 

    person: Person; 
    formBuilder: FormBuilder; 
    personForm: FormGroup; 

    constructor(formBuilder: FormBuilder, personService: PersonService) { 
     this.person = new Person(); 
     this.personForm = formBuilder.group({ 
      personName: [this.person.personName, Validators.required], 
      ... many more properties for form 
     }); 
    } 

    ngOnInit() { 
     console.log('ngOnInit() called'); 
    } 

    savePerson() { 
     this.person.personName = this.personForm.value.personName; 
     ... many more properties set 
     this.personService.savePersontoDB(this.person); 
    } 
} 

Trong savePerson() chức năng Tôi gặp để sao chép các giá trị từ các personForm FormGroup đến Person vật. Đối với một số ít các thuộc tính này là tốt tuy nhiên nếu tôi có nhiều tài sản này sẽ chỉ là một điều khác để quản lý. Làm cách nào để tôi có thể đơn giản hóa mã này để:

1. giá trị personForm được tự động sao chép vào đối tượng Person làm giá trị biểu mẫu thay đổi.
2. giá trị personForm được tự động sao chép vào đối tượng Person khi người dùng nhấn nút "lưu" (sau đó gọi hàm save(). Điều này có nghĩa là tôi không phải sao chép tất cả các giá trị biểu mẫu riêng lẻ vào mô hình của tôi (Người) đối tượng.

là gì cách tốt nhất để thực hiện điều này? có một số loại helper tôi có thể sử dụng hoặc là nó đơn giản hơn thế này?

Rất cám ơn

JT

Answer 1

Trong ứng dụng của tôi, tôi đã làm điều này:

this.selectedPhysical = <Physical>this.physicalForm.value; 

này ánh xạ các trường trong dạng ui đến đối tượng bên dưới. Vì vậy, bạn có thể:

this.person = <Person>this.personForm.value; 
this.personService.savePersontoDB(this.person);