Buduję aplikację do sprzedaży dla Departamentu za pomocą średniego stosu. Użytkownik wypełnia żądanie biletu. Informacje będą przechowywane na DB, a następnie wyświetlane na stronie. Inna osoba z Departamentu będzie musiała zmienić / poprawić niektóre pola.

Mam kilka pól wyboru, które muszą być wypełnione wybrane informacje z oryginalnych danych formularzy, które mieszają w DB.

Problemem, który mam, polega na tym, że ustawienie wartości sterowania formularzem do informacji o odpowiedzi, otrzymuję błąd "niezdefiniowany". Zakładam, że dom kończy się, zanim dojdzie do setValue, ale niepewnie.

Wszelkie porady są doceniane.

Szczegóły-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

  }

Szczegóły-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>
0
Jay Rich 22 luty 2019, 20:44

2 odpowiedzi

Najlepsza odpowiedź

Musisz utworzyć i zainicjować grupę Formgroup w ramach subskrypcji do DataService w przeciwnym razie formgroup.setValue jest wyzwalany niezależnie od zaplecza.

Ponadto prawdopodobnie użyję mapy operatora RXJS, aby połączyć pobieranie parametry zapytania i połączenia zaplecza, aby uniknąć dwóch subskrypcji w sobie

0
Erbsenkoenig 22 luty 2019, 20:06

Czy rozważałeś za pomocą ngModel, aby wykonać podwójne wiązanie z własnością WO w formularzu? Czy coś ci to uniemożliwia?

Jeśli nie, równie dobrze możesz podwoić:

  <!-- 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... -->

Możesz odnosić się do tej sekcji w dokumentach kątowych: HTTPS: // angular.io/guide/template-Syntax#twovo-way-binding---.

0
mitschmidt 22 luty 2019, 20:13