Angular 4 @ngui-自动完成

Question

我正在尝试在 Angular 4 项目中使用库 @ngui-autocomplete。我使用一个表单在数据库中创建新条目以及 updating/editing 现有条目。我的自动完成输入代码如下：

<div [ngClass]="{
              'form-group': true, 'row' : true,
              'has-danger': incidentForm.get('doctor').invalid && ( incidentForm.get('doctor').touched || incidentForm.get('doctor').dirty ),
              'has-success': incidentForm.get('doctor').valid && ( incidentForm.get('doctor').dirty || incidentForm.get('doctor').touched )
           }">
  <label for="doctor" class="col-sm-2 col-form-label">Ιατρός:</label>
  <div class="col-6">

    <input ngui-auto-complete [ngClass]="{
              'form-control': true,
              'form-control-danger': incidentForm.get('doctor').invalid && ( incidentForm.get('doctor').touched || incidentForm.get('doctor').dirty ),
              'form-control-success': incidentForm.get('doctor').valid && ( incidentForm.get('doctor').dirty || incidentForm.get('doctor').touched )
              }"
           name="doctor" formControlName="doctor"
           id="doctor" [source]="doctors"
           autocomplete="off"
           [list-formatter]="'lastName firstName'"
           value-formatter="lastName firstName"
           select-value-of="id"
           required >

    <!-- VALIDATION -->
    <div class="form-control-feedback"
         *ngIf="incidentForm.get('doctor').hasError('required') && incidentForm.get('doctor').touched">
      {{ validationMessages.doctor.required }}
    </div>
    <!-- END OF VALIDATION -->
  </div>
</div>

我的 form.ts 代码是：

import {Component, OnInit} from '@angular/core';
import {IncidentsService} from '../incidents.service';
import {Patient} from '../../patients/patient';
import {Doctor} from '../../doctors/doctor';
import {Clinic} from '../../clinics/clinic';
import {Incident} from '../incident';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {SigningDoctor} from '../../signing-doctors/signing-doctor';
import {HttpErrorResponse} from '@angular/common/http';
import {ActivatedRoute} from '@angular/router';

import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';
import {Observable} from 'rxjs/Observable';
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';


@Component({
  selector: 'app-incident-form',
  templateUrl: './incident-form.component.html',
  styleUrls: ['./incident-form.component.css']
})
export class IncidentFormComponent implements OnInit {

  private incident: Incident;
  private id;

  private incidentForm: FormGroup;
  private patients: Patient[] = [];
  private doctors: Doctor[] = [];
  private clinics: Clinic[] = [];
  private signingDoctors: SigningDoctor[] = [];
  private doctor: Doctor;

  private errorMsg;


  constructor(private incidentsService: IncidentsService, private formBuilder: FormBuilder,  private route: ActivatedRoute,  private sanitizer: DomSanitizer) {
    this.createForm();
  }

  createForm() {

    this.incidentForm = this.formBuilder.group({
      protocolNo: ['', [Validators.required, Validators.pattern('^[0-9]{1,}')]],
      date: ['', Validators.required],
      mikro: ['', Validators.required],
      makro: ['', Validators.required],
      yliko: ['', Validators.required],
      anoso: [''],
      histo: [''],
      klinikesPlirofories: [''],
      simpliromatikiEkthesi: [''],
      symperasma: ['', Validators.required],
      patient: ['', Validators.required],
      doctor: ['', Validators.required],
      clinic: [''],
      isPayed: ['', Validators.required],
      signingDoctor: ['', Validators.required]
    });

  }


  ngOnInit() {

    this.parseID();
    this.getIncidentByID();
    this.getRelatedData();
  }

  private parseID() {

    this.route.params
      .catch(error => {
        console.log('error catched', error);

        return Observable.of({description: error});
      })
      .subscribe(
        params => {
          this.id = +params['id'];
        }
      );
  }

  private setFormValues(response){
    this.incidentForm.get('protocolNo').setValue(response.protocolNo);
    this.incidentForm.get('date').setValue(response.date);
    this.incidentForm.get('mikro').setValue(response.mikro);
    this.incidentForm.get('makro').setValue(response.makro);
    this.incidentForm.get('yliko').setValue(response.yliko);
    this.incidentForm.get('anoso').setValue(response.anoso);
    this.incidentForm.get('histo').setValue(response.histo);
    this.incidentForm.get('klinikesPlirofories').setValue(response.klinikesPlirofories);
    this.incidentForm.get('simpliromatikiEkthesi').setValue(response.simpliromatikiEkthesi);
    this.incidentForm.get('symperasma').setValue(response.symperasma);
    this.incidentForm.get('isPayed').setValue(response.isPayed);
    this.incidentForm.get('doctor').setValue(response.doctor);
  }

  autocompleListFormatter = (data: any) => {
    let html = `${data.lastName} ${data.firstName}`;
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }


  private getIncidentByID() {

    this.incidentsService.getIncidentByID(this.id)
      .subscribe(
        response => {
          this.incident = response;
          this.setFormValues(response);

        },
        (err: HttpErrorResponse) => {
          if (err.error instanceof Error) {
            // A client-side or network error occurred. Handle it accordingly.
            console.log('An error occurred:', err.error.message);
          } else {
            // The backend returned an unsuccessful response code.
            // The response body may contain clues as to what went wrong,
            console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
          }
        });
  }

  getRelatedData() {

    this.incidentsService.getRelatedData().subscribe(
      results => {
        this.patients = results[0];
        this.doctors = results[1];
        this.clinics = results[2];
        this.signingDoctors = results[3];
      },
      (err: HttpErrorResponse) => IncidentFormComponent.handleError
    );
  }

  submitForm() {

    this.incidentsService.submitForm(this.incidentForm.value).subscribe(
      res => {
        // this.incident = res;
        console.log('Submit Form Response: ' + JSON.stringify(res));

        this.incidentForm.reset();
        // this.createForm();
      },
      (err: HttpErrorResponse) => IncidentFormComponent.handleError
    );

  }

  static handleError(err) {

    if (err.error instanceof Error) {
      // A client-side or network error occurred. Handle it accordingly.
      console.log('An error occurred:', err.error.message);
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
    }

  }

  validationMessages = {
    protocolNo: {
      required: 'Ο Αριθμός Πρωτοκόλλου είναι υποχρεωτικός.',
      pattern: 'Ο Αριθμός Πρωτοκόλλου Έχει Λάθος Μορφή.'
    },
    date: {
      required: 'Η Ημερομηνία Είναι Υποχρεωτική. ',
      pattern: 'Λάθος Μορφή Ημερομηνίας.'
    },
    symperasma: {
      required: 'Το Συμπερασμα είναι Υποχρεωτικό.',
    },
    patient: {
      required: 'Η Επιλογή Ασθενή Είναι Υποχρεωτική.'
    },
    doctor: {
      required: 'Η Επιλογή Ιατρού Είναι Υποχρεωτική.'
    },
    signingDoctor: {
      required: 'Η Επιλογή Υπογράφων Ιατρού Είναι Υποχρεωτική.'
    },
    yliko: {
      required: 'Το πεδίο υλικό είναι υποχρεωτικό.'
    },
    mikro: {
      required: 'Το πεδίο μίκροσκοπικά είναι υποχρεωτικό.'
    },
    makro: {
      required: 'Το πεδίο μακροσκοπικά είναι υποχρεωτικό.'
    },
    isPayed: {
      required: 'Το πεδίο πληρωμή είναι υποχρεωτικό.'
    },

    success: 'Yeah'
  };

}

对于创建条目，一切都按预期进行。但是，当我更新现有条目时，想通过使用命令

将值设置为自动完成输入组件

this.incidentForm.get('doctor').setValue(response.doctor);

虽然 form.value 在输入字段中是正确的，但我得到： [object Object] 而不是 command

中声明的 "lastName firstName"

value-formatter="lastName firstName"

我想我遗漏了一些非常简单的东西，但我无法理解。

Answer 1

您需要在输入中传递 [(ngModel)]。

因为它是自动完成的并且作为下拉列表工作，所以您需要绑定您的模型，这就是您可以搜索数据的方式，并且 select 该数据具有两种数据绑定方式。

<input ngui-auto-complete name="doctor" 
       formControlName="doctor" 
       id="doctor" 
       [source]="doctors" 
       autocomplete="off" 
       [list-formatter]="'lastName firstName'" 
       value-formatter="lastName firstName" 
       [(ngModel)] = "Doctor" 
       required>

Answer 2

解决方案很简单。刚刚添加

 display-property-name="lastName firstName"

即

<input ngui-auto-complete name="doctor" 
   formControlName="doctor" 
   id="doctor" 
   [source]="doctors" 
   autocomplete="off" 
   [list-formatter]="'lastName firstName'" 
   value-formatter="lastName firstName" 
   display-property-name="lastName firstName"
   [(ngModel)] = "Doctor" 
   required>

Angular 4 @ngui-自动完成

Angular 4 @ngui-autocomplete

angular

autocomplete

ngui