Angular 5表单验证求助：无法访问验证器属性

我帮你梳理了代码里的几个关键问题，调整后应该就能让表单验证正常工作啦：

1. 嵌套表单标签导致控件绑定失效 #

你的HTML里嵌套了两层<form>标签，外层的<form [formGroup]="myform">已经是响应式表单的容器了，内层的额外表单标签会干扰控件与FormGroup的关联，导致验证状态无法正确触发。

修复：
直接移除内层的<form class="form-horizontal"...>标签，保留外层的表单容器即可。

2. 正则验证器的写法错误 #

创建firstname控件时，你给Validators.pattern传了带引号的正则表达式，这会被当作普通字符串处理，根本起不到匹配作用。

修复：
两种正确写法任选其一：

// 方式1：直接使用正则表达式字面量
this.firstname = new FormControl('', [
  Validators.required,
  Validators.pattern(/^[A-Za-z]+$/),
  Validators.maxLength(20)
]);

// 方式2：使用不带斜杠的字符串形式正则
this.firstname = new FormControl('', [
  Validators.required,
  Validators.pattern('^[A-Za-z]+$'),
  Validators.maxLength(20)
]);

3. 重复的required属性与样式逻辑优化 #

你已经在FormControl里添加了Validators.required，输入框上的required属性可以去掉，避免重复校验冲突。另外可以保留你的ngClass判断逻辑，但确保状态判断准确。

优化后的HTML核心片段：

<div class="was-validated">
  <form [formGroup]="myform" novalidate role="form">
    <div class="row main">
      <div class="main-login main-center" style="padding-top:0px;">
        <div class="row">
          <div class="col-md-5">
            <div class="form-group" 
                 [ngClass]="{ 
                   'has-success': firstname.valid && (firstname.dirty || firstname.touched), 
                   'has-danger': firstname.invalid && (firstname.dirty || firstname.touched) 
                 }">
              <label for="firstname" class="cols-sm-2 control-label">First Name</label>
              <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
              <input formControlName="firstname" 
                     type="text" 
                     class="form-control" 
                     name="firstname" 
                     id="firstname" 
                     placeholder="Enter your First Name"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

4. 根模块缺少响应式表单模块导入（关键！） #

你在组件里导入了ReactiveFormsModule，但必须在根模块（比如AppModule）的imports数组里注册它，否则响应式表单功能根本无法生效。

在AppModule中补充导入：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms'; // 导入模块
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ReactiveFormsModule, // 添加到这里
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

额外小建议：用FormBuilder简化代码 #

可以用Angular的FormBuilder来替代手动创建FormControl和FormGroup，让代码更简洁：

// 组件里注入FormBuilder
constructor (private http:HttpClient, private fb: FormBuilder){ }

ngOnInit(){
  this.myform = this.fb.group({
    firstname: ['', [
      Validators.required,
      Validators.pattern(/^[A-Za-z]+$/),
      Validators.maxLength(20)
    ]]
  });
}

这样就能删掉createFormControls和createForm两个方法啦。

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