Angular表单绑定值显示但无法提交且ng-invalid类异常求助

• 需求：从服务器获取用户名并显示在HTML输入框中，支持查看和编辑，提交表单时将新用户名发送回服务器更新数据库。
• 当前实现：在AfterViewInit钩子中通过HTTP请求获取用户名，赋值给accountUsername变量，然后通过[value]绑定到输入框，同时使用ngModel。
• 问题：输入框能显示用户名，但未修改时提交表单，发送的username值为空字符串''；即使输入框有值，控件仍被标记为ng-invalid。

同时使用[value]和ngModel会导致Angular表单的视图值与模型值不同步：

• ngModel会维护自身的表单模型状态，直接用[value]赋值仅更新DOM显示，不会同步到模型中。
• 表单验证逻辑基于模型值，模型值为空时会触发required验证，因此控件被标记为ng-invalid。

方案一：通过表单控件API初始化值（推荐） #

直接操作NgForm的控件实例，用setValue方法设置初始值，确保模型与视图同步。

修改后代码 #

app.component.ts

import { HttpClient } from '@angular/common/http';
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  constructor(private http: HttpClient){}

  @ViewChild('accountForm') accountForm: NgForm;

  ngAfterViewInit(): void {
    this.http.get<{username: string}>(
      'http://localhost:80/accountinfo'
    ).subscribe(resData => {
      // 直接给表单控件设置初始值
      this.accountForm.controls['username'].setValue(resData.username);
    })
  }

  onSubmit(){
    console.log(this.accountForm.value);
    // 此处添加更新数据库的HTTP请求逻辑
    // this.http.post('/update-username', this.accountForm.value).subscribe(...);
  }
}

app.component.html

<form #accountForm="ngForm" (ngSubmit)="onSubmit()">
  <label for="username">Username</label>
  <input 
    type="text" 
    id="username" 
    name="username" 
    ngModel 
    #username="ngModel" 
    required>
  <button type="submit">Submit</button>
</form>

方案二：使用双向数据绑定[(ngModel)] #

通过双向绑定将变量与表单控件关联，变量更新时自动同步到表单模型。

修改后代码 #

app.component.ts

import { HttpClient } from '@angular/common/http';
import { AfterViewInit, Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  constructor(private http: HttpClient){}

  accountUsername: string = ''; // 初始化空字符串避免undefined

  ngAfterViewInit(): void {
    this.http.get<{username: string}>(
      'http://localhost:80/accountinfo'
    ).subscribe(resData => {
      this.accountUsername = resData.username;
    })
  }

  onSubmit(form: NgForm){
    console.log(form.value);
    // 此处添加更新数据库的HTTP请求逻辑
    // this.http.post('/update-username', form.value).subscribe(...);
  }
}

app.component.html

<form #accountForm="ngForm" (ngSubmit)="onSubmit(accountForm)">
  <label for="username">Username</label>
  <input 
    type="text" 
    id="username" 
    name="username" 
    [(ngModel)]="accountUsername" 
    #username="ngModel" 
    required>
  <button type="submit">Submit</button>
</form>

内容的提问来源于stack exchange，提问作者user18188599