A continuación se muestra el componente HTML

<div fxLayout="row" fxLayoutAlign="center center">
<mat-card fxFlex="30">
    <mat-card-content>
        <mat-card-title>
            <h2>Employee Details Form</h2>
        </mat-card-title>
        <form class="login-form"  [formGroup]="empForm" (ngSubmit)="onSubmit()">
            <div fxLayout="column">
                <p>
                    <mat-form-field class="item">
                        <input matInput type="text" placeholder="First Name" value={{firstName}} formControlName="fname"> 
                    </mat-form-field>
                </p>
                <p>
                    <mat-form-field class="item">
                        <input matInput type="text" placeholder="Last Name" value={{lastName}} formControlName="lname">
                    </mat-form-field>
                </p>
                <p>
                    <mat-form-field class="item">
                        <input matInput type="text" placeholder="Email ID" value={{emailId}} formControlName="email">
                    </mat-form-field>
                </p>
                <button mat-raised-button color="primary" type="submit">
                    <mat-icon>mic</mat-icon>
                    Submit
                </button>
            </div>
        </form>
    </mat-card-content>
</mat-card>

Necesito enlazar campos de formulario que ya he tomado del método angular http get.

Componente ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { EmployeeService } from '../service/employee/employee.service';
import { FormGroup, FormBuilder } from '@angular/forms';

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

  public id: number;
  public empForm: FormGroup;
  public firstName: string;
  public lastName: string;
  public emailId: string;

  constructor(private activateRoute: ActivatedRoute, private employeeService: EmployeeService, private formBuilder: FormBuilder) { }

  ngOnInit(): void {

    this.empForm = this.formBuilder.group({
      fname: [''],
      lname: [''],
      email: ['']
    });

    this.id = this.activateRoute.snapshot.params['id'];

    this.employeeService.getEmployeeById(this.id).subscribe(
      response => {
        this.firstName = response.firstName;
        this.lastName = response.lastName;
        this.emailId = response.emailId;
      });    
  }

  onSubmit() {
    console.log("From EMP")
    console.log(this.empForm.value);
  }
}

Cuando imprimo los valores en la consola, obtengo valores de formulario vacíos, pero cuando edito los campos de formulario y los envío, obtengo los valores adecuados. Mi preocupación es que debería obtener valores sin siquiera actualizar los campos del formulario.

0
SUNIL CHITYALA 7 may. 2020 a las 06:58

2 respuestas

La mejor respuesta

Ha utilizado el atributo value para establecer el valor. En su lugar, puede establecer los valores directamente en su formulario. Mira esto:

this.employeeService.getEmployeeById(this.id).subscribe(
      response => {
        this.firstName = response.firstName;
        this.lastName = response.lastName;
        this.emailId = response.emailId;

        this.empForm.patchValue({
           fname: this.firstName,
           lname: this.lastName,
           email: this.emailId
        });
});

De esta forma, obtendrá un enlace bidireccional con forma reactiva. Y elimine el atributo value de la etiqueta de entrada.

2
Tushar 7 may. 2020 a las 04:25

Pruebe algo como a continuación:

<div fxLayout="row" fxLayoutAlign="center center">
    <mat-card fxFlex="30">
        <mat-card-content>
            <mat-card-title>
                <h2>Employee Details Form</h2>
            </mat-card-title>
            <form class="login-form"  [formGroup]="empForm" (ngSubmit)="onSubmit()">
                <div fxLayout="column">
                    <p>
                        <mat-form-field class="item">
                            <input matInput type="text" placeholder="First Name" formControlName="fname"> 
                        </mat-form-field>
                    </p>
                    <p>
                        <mat-form-field class="item">
                            <input matInput type="text" placeholder="Last Name"  formControlName="lname">
                        </mat-form-field>
                    </p>
                    <p>
                        <mat-form-field class="item">
                            <input matInput type="text" placeholder="Email ID" formControlName="email">
                        </mat-form-field>
                    </p>
                    <button mat-raised-button color="primary" type="submit">
                        <mat-icon>mic</mat-icon>
                        Submit
                    </button>
                </div>
            </form>
        </mat-card-content>
    </mat-card>

Y para tus .ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { EmployeeService } from '../service/employee/employee.service';
import { FormGroup, FormBuilder } from '@angular/forms';

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

  id: number;
  empForm: FormGroup;
  constructor(private activateRoute: ActivatedRoute, private employeeService: EmployeeService, private formBuilder: FormBuilder) { }

  ngOnInit(): void {

    this.empForm = this.formBuilder.group({
      fname: [''],
      lname: [''],
      email: ['']
    });

    this.id = this.activateRoute.snapshot.params['id'];

    this.employeeService.getEmployeeById(this.id).subscribe(
      response => {
        console.log(response);
        this.empForm.setValue(response);
      });    
  }

  onSubmit() {
    console.log("From EMP")
    console.log(this.empForm.value);
  }
}

Haga su mejor esfuerzo para asegurarse de que el objeto que devuelve su API coincida con todas las propiedades y la carcasa dentro de su empForm FormGroup declarado.

Esto también puede ser útil: https://www.positronx.io / angular-8-reactivo-formas-validación-con-material-angular-8 /

0
dnunez32 7 may. 2020 a las 04:26