用字符串插值预填充角反应形式

时间:2018-08-18 06:51:02

标签: angular forms angular-reactive-forms

是否有可能用其他成分的值预填充反应性形式?

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

import { Location } from '@angular/common';
import { FormGroup, FormControl, FormArray, Validators} from '@angular/forms';
import { DatePicker } from 'angular2-datetimepicker';

import { PacService } from '../../../services/pacient.service';
import { PsmService } from '../../../services/psm.service';

import { Pacient } from '../../Pacienti-Main/pacient';

//EXPORTURI
export interface Pilon {
  value: string;
  viewValue: string;
}
export interface PozitieSchema {
  value: string;
  viewValue: string;
}
export interface Flacon {
  value: string;
  viewValue: string;
}

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

  vizitaForm: FormGroup;

  pacienti: any;
  pacient: Pacient;
  psms:any;
  responsabili: any;
  responsabil: any;

  date: Date = new Date();
  settings = {
      bigBanner: false,
      timePicker: false,
      format: 'dd-MM-yyyy',
      defaultOpen: false
  }

  //Piloni
  piloni: Pilon[] = [
    {value: 'Pilon-1', viewValue: 'Pilon 1'},
    {value: 'Pilon-2', viewValue: 'Pilon 2'},
  ];
  //PozitieSchema
  pozitii: PozitieSchema[] = [
    {value: 'In Tratament', viewValue: 'In Tratament'},
    {value: 'In Pauza', viewValue: 'In Pauza'},
    {value: 'Intrerupere', viewValue: 'Intrerupere'},
  ]
  modFlacon: Flacon[] = [
    {value: 'Valid', viewValue: 'Valid'},
    {value: 'Invalid', viewValue: 'Invalid'},
  ]
  grConfort: string[] = ['1', '2', '3', '4', '5'];
  grDurere: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
  ea: string[] = ['Da', 'Nu'];


  constructor( private router: Router, private _pacService: PacService, private psmService: PsmService, private route: ActivatedRoute, private location: Location) {
    DatePicker.prototype.ngOnInit = function() {
      this.settings = Object.assign(this.defaultSettings, this.settings);
      if (this.settings.defaultOpen) {
      this.popover = true;
      }
      this.date = new Date();
      }; 
   }

  ngOnInit() {
    this.getPatients();
    this.getSinglePatient();
   }

   this.vizitaForm = new FormGroup({
    Name: new FormControl(`${this.pacient.Name}`), // this line should be populated with the name of the patient.
    _id_pacient: new FormControl(''),
    Adresa: new FormControl(''),
    Judet: new FormControl(''),
    DataVizita: new FormControl(''),
    DataStartTratamentCurent: new FormControl(''),
    Pilon: new FormControl(''),
    VizitaUrmatoare: new FormControl(''),
    PSM: new FormControl(''),
    MedicCurant: new FormControl(''),
    IntreruperePermanenta: new FormControl(''),
    RidicareMedic: new FormControl(''),
    PrezentareFarma: new FormControl(''),
    RidicareFarma: new FormControl(''),
    Responsabil: new FormControl(''),
    ZileAsteptare: new FormControl(''),
    PozitieSchema: new FormControl(''),
    PozitieZi: new FormControl(''),
    Flacon: new FormControl(''),
    NrPastile: new FormControl(''),
    TratamentPrecedentB: new FormControl(''),
    GrConfort: new FormControl(''),
    GrDurere: new FormControl(''),
    EA: new FormControl(''),
    Observatii: new FormControl(''),
    GPS: new FormControl(''),


   })

  }


 addVisit(visitForm){
   this._pacService
   .addVisit(this.visitForm.value)
   .subscribe(() => this.goBack())
 }

  getPacienti() {
    this._pacService
      .getPacienti()
      .subscribe(pacienti => {
        this.pacienti = pacienti;
      })
  }


  getSinglePacient(){
    var id = this.route.snapshot.params['id'];
    this._pacService
      .getPacient(id)
      .subscribe(patient => {
        this.patient = patient[0]
      });
  }



  goBack() {
    this.location.back(); // <-- go back to previous location on cancel
  }

HTML

<form [formGroup]="vizitaForm" (ngSubmit)="addVizita(vizitaForm)">

     <!--IDENTIFICARE-->
     <h6 class="alert alert-dark">Identificare</h6>
     <div class="row" style="margin-top:10px; margin-bottom: 10px">
         <div class="col-md-3 col-sm-12 col-xs-12">
             <mat-card>
                 <label>Pacient<b><span class="text-danger">*</span></b></label><br>

                 <mat-form-field class="example-full-width">
                    <input matInput placeholder="{{patient.Nume}}" formControlName="Name">
                  </mat-form-field>

这是我的.ts文件,用于为该患者添加一些家庭访问的表格。以及单个患者的详细信息。在我的数据库中,当我添加visitform而不是诸如“ Bob”之类的值时,就形成了患者详细信息,我得到了$patient.Name。非常感谢!

1 个答案:

答案 0 :(得分:0)

您可以尝试使用new FormControl(patient.Name)

this.visitForm = new FormGroup({
  PatientName: new FormControl(patient.Name),
  _id_pacient: new FormControl(patiet._id),
  Adress: new FormControl(patient.Adress),