Angular HTML表单 - 值属性在输入字段中不起作用

Question

中有一个模板驱动的表单

<div class="container" *ngIf="employee">
<h3>Employee {{employee.lastname}}</h3>
<form #f="ngForm" (ngSubmit)="submit(f)">
    <div class="form-group">
        <label for="firstname">Name </label><br>
        <input type="text" class="form-control" name="firstname" ngModel value="{{employee.firstname}}" >
    </div>
    <button class="btn" type="submit">Update Employee Name</button>
</form>

表格的目标是更新给定员工的名称。

我在MyFormComponent模板

import { Component, OnInit } from '@angular/core';
import { Employee } from '../employee';
import { NgForm } from '@angular/forms'
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-myform',
  templateUrl: './myform.component.html',
  styleUrls: ['./myform.component.css']
})
export class MyFormComponent implements OnInit {
  public myvar = "hi";
    constructor() {}

employee?: Employee;

ngOnInit(): void {
    this.getEmployee();
}

submit(f: any){
  //Everything here works correctly. I do get the form object
}

getEmployee(): void {
  //Everything here works correctly
}
}

。 它是空白/空的。
如果我使用“占位符”而不是“价值”，则可以使用。但是我希望它是一个默认值，因此如果用户不想更改它，则不必输入。
如果我使用.TS文件中公开声明的'myvar'而不是{{lightee.firstname}}}，它也没有显示。

formsModule是在根模块中导入的。
@Angular/CLI 14.0.2。 Mozilla/Chrome

Answer 1

您可以尝试使用给定的2种方法。

1。

<form #f="ngForm" (ngSubmit)="submit(f)">
  <div class="form-group">
    <label for="firstname">Name </label><br />
    <input
      type="text"
      class="form-control"
      name="firstname"
      [(ngModel)]="employee.firstname"
    />
  </div>
  <button class="btn" type="submit">Update Employee Name</button>
</form>

<form #f="ngForm" (ngSubmit)="submit(f)">
  <div class="form-group">
    <label for="firstname">Name </label><br />
    <input
      type="text"
      class="form-control"
      name="firstname"
      [value]="employee.firstname"
    />
  </div>
  <button class="btn" type="submit">Update Employee Name</button>
</form>

工作演示

Answer 2

我的建议是删除 * ngif =“雇员” 在顶级div中，使用 value =“ {{雇员？.firstname}}” 而不是。

所以：

<div class="container">
  <h3>Employee {{employee?.lastname}}</h3>
  <form #f="ngForm" (ngSubmit)="submit(f)">
      <div class="form-group">
          <label for="firstname">Name </label><br>
          <input type="text" class="form-control" name="firstname" ngModel value="{{employee?.firstname}}" >
      </div>
      <button class="btn" type="submit">Update Employee Name</button>
  </form>
 .
 .