Angular表单渲染异常：name与session输入项无法正常显示求助

你代码中最核心的语法错误是输入框标签写法不规范：

• 两处input标签都漏掉了type属性名，你写的<input="text"属于错误语法，浏览器无法正常识别渲染输入框，正确写法应该是<input type="text"

修改后正确的模板代码如下：

<div class="card">
  <form [formGroup]="userForm">
    <div class="mt-5">
      <div class="form-row">
        <div class="col-md-12">
          <div class="form-group">
            <label>Name</label>
          </div>
          <div class="form-row">
            <div class="col">
              <input type="text" formControlName="name" class="form-control" placeholder="Name">
            </div>
          </div>
        </div>
        <div class="col-md-12">
          <div class="form-group">
            <label>Session</label>
          </div>
          <div class="form-row">
            <div class="col">
              <input type="text" formControlName="session" class="form-control" placeholder="Session">
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

其他可能存在的配套问题 #

如果修改后表单仍然无法正常工作，需要检查对应的组件代码和模块配置：

• 确认你所在的模块已经导入了ReactiveFormsModule，否则Angular响应式表单无法正常生效
• 确认组件类中已经正确初始化了userForm，示例ts代码参考：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.userForm = this.fb.group({
      name: [''],
      session: ['']
    })
  }

  ngOnInit(): void {
  }
}

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