Angular 5 - Обновление модели из формы - PullRequest
Новая
       9

Angular 5 - Обновление модели из формы

0 голосов
/ 29 июня 2018

Я новичок в Angular 5, и я пытаюсь сделать CRUD. Я борюсь с частью "обновления".

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

Я пробовал столько вещей на форумах и форумах, что теперь я полностью потерян. Итак, вот что у меня есть.

HTML: 

<form [formGroup]="policyForm" (ngSubmit)="update()">
  <mat-form-field>
    <input formControlName="policyName">
  </mat-form-field>
... Many other inputs
  <button type="submit" color="primary">Update</button>
</form>

компонент: 

export class PolicyUpdateComponent implements OnInit {

  policyModel: PolicyModel;
  policyId = +this.route.snapshot.paramMap.get('id');
  policyForm: FormGroup;
  formBuilder: FormBuilder;

  constructor(

    private policyService: PolicyService,
    private route: ActivatedRoute,
    private router: Router,
    private fb: FormBuilder

  ) {

    this.policyService.get(this.policyId)
      .subscribe(policy => this.policyModel = policy);
  }


  ngOnInit() {
    this.createForm();
  }

  createForm() {
    this.policyForm = this.fb.group({
      policyName: [this.policyModel.name, Validators.required]
    });
  }

  update(id: number) {
    id = this.policyId;
    this.policyModel = <PolicyModel>this.policyForm.value;
    this.policyService.update(id, this.policyModel).subscribe(res => {
      this.router.navigate(['/policies', id, 'get']);
    }, (e) => {
      console.log(e);
    }
    );

  }

}

услуга: 

 /**
   * Update a policy with new parameters
   * @param pm PolicyModel
   */
  update(id: number, pm: PolicyModel): Observable<any> {
    return this.http.put<PolicyModel>(`${environment.baseApiUrl}/${environment.apiVersion}/policies/${id}`, {pm});
  }

любая помощь была бы хороша .. спасибо, ребята!

1 Ответ

0 голосов
/ 29 июня 2018

Измените код в соответствии с этим. 

<form [formGroup]="policyForm"  >
  <mat-form-field>
    <input formControlName="policyName">
  </mat-form-field>
  <button color="primary" (click)="update()">Update</button>
</form>

Добавить подписку для обнаружения изменений формы. 

    ngOnInit() {
        this.createForm();

        this.policyForm.valueChanges.subscribe(
          (data) => {
            if (JSON.stringify(data) !== JSON.stringify({})) {
              this.policyModel.name = data.policyName;
            }
          });
      }

      createForm() {
        this.policyForm = this.fb.group({
          policyName: [this.policyModel.name]
        });
      }

       update(id) {
       this.policyModel.id = id;
       id = this.policyId;
   this.policyService.update(id, this.policyModel)//.subscribe(res => {
     this.router.navigate(['/policies', id, 'get']);
    }, (e) => {
      console.log(e);
    }
    );
      }

Пример кода: https://stackblitz.com/edit/angular-wwt91u

...