Angular: значение реактивной формы из подписки - PullRequest
Новая
       24

Angular: значение реактивной формы из подписки

0 голосов
/ 22 февраля 2019

Я создаю приложение для продажи билетов для отдела, используя стек MEAN.Пользователь заполнит запрос на билет.Информация будет сохранена в БД, а затем отображена на странице.Другой сотрудник отдела должен будет изменить / исправить определенные поля.

У меня есть несколько полей, которые необходимо заполнить предварительно выбранной информацией из исходных данных формы, которая находится в БД.

Проблема, с которой я сталкиваюсь, заключается в том, что, когда я устанавливаю значение элемента управления формы в информацию об ответе, я получаю «неопределенную» ошибку.Я предполагаю, что dom завершает работу до того, как достигнет установленного значения, но не уверен.

приветствуется любой совет.

detail-wo.component.ts 

import { Component, OnInit } from '@angular/core';
...
import { WoService } from '../../../service/wo.service';
import {Wo } from '../../../models/wo.model';
.......

@Component({
..........
})
export class DetailWoComponent implements OnInit {
  wo: Wo;
  stat;
  woUpdateForm: FormGroup;
 .............

  private woId: string;

  constructor(public woService: WoService, public route: ActivatedRoute) {}

  ngOnInit() {
    this.route.paramMap.subscribe((paramMap: ParamMap) => {
      this.woId = paramMap.get('woId');
      this.woService.getWo(this.woId).subscribe(woData => {
        this.wo = {
          _id: woData._id,
         ......
          status: woData.status,
          ....
        };
       this.stat = theis.wo.status;

      });
    });

    // form
    this.woUpdateForm = new FormGroup({
      assignment: new FormControl('No One', {
        validators: [Validators.required]
      }),
      status: new FormControl(null, {
        validators: [Validators.required]
      }),
      reqtype: new FormControl(null, {
        validators: [Validators.required]
      })
    });


    this.ewoUpdateForm.controls['status'].setValue(this.stat); // value from wo data from db

  }

detail-wo.component.html 

<h3>EWO Details</h3>
  <h5>EWO #: <span class="orange">{{ewo?._id}}</span></h5>

<div class="row mt-3">

  <div class="col">
    <h5>User Input</h5>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Start Date: {{wo.startDate}} </li>    
      <li class="list-group-item">Status: {{wo.status}} </li>
....
    </ul>
  </div>
 </div>


<form class="mt-5 mb-5" (submit)="onUpdateWo()" [formGroup]="woUpdateForm">
  <div class="row bg border p-3 rounded">
 
.......
  <!-- Assigment -->
  <div class="form-group col">
    <label for="status">Assignment: </label>
    <select class="form-control" formControlName="assignment">
      <option *ngFor="let assign of assigments" value="{{assign.id}}">{{assign.name}}</option>
    </select>
  </div>



  <!-- Status change -->
  <div class="form-group col">
    <label for="status">Status Change </label>
    <select class="form-control" formControlName="status">
      <option *ngFor="let status of statuses" value="{{status.id}}">{{status.name}}</option>
    </select>
  </div>

</div>
</form>
<code>{{ewo | json}}</code>

Ответы [ 2 ]

0 голосов
/ 22 февраля 2019

Рассматривали ли вы использование ngModel для двойного связывания вашего свойства wo в форме?Что-нибудь мешает вам в этом?

Если нет, то вы можете также выполнить двойное связывание следующим образом: 

  <!-- Status change -->
  <div class="form-group col">
    <label for="status">Status Change </label>
    <select class="form-control" formControlName="status" [(ngModel)]="wo.status">
      <option *ngFor="let status of statuses" [value]="status">{{status.name}}</option>
    </select>
  </div>
<!-- etc... -->

. Вы можете обратиться к этому разделу в угловых документах: https://angular.io/guide/template-syntax#two-way-binding---

0 голосов
/ 22 февраля 2019

Вам необходимо создать и инициализировать formGroup в вашей подписке на dataService, в противном случае formGroup.setValue запускается независимо от внутреннего вызова.

Более того, я бы, вероятно, использовал карту оператора RxJs, чтобы объединить повторный запрос вашего queryParam и внутренний вызов, чтобы избежать двух подписок друг в друге

...