输入无效时出现Angular 5 FormBuilder错误未定义

Question

[当新手尝试将其放入plnkr时，但是不能； 将@ angular / forms添加到json时出现问题。]

目的：整理在FormBuilder HTML中完成所有工作所需的知识：

  <input type="text"
         formControlName="bucket"
         value="A"
         [(ngModel)]="AllData.bucket" />

  // added to button  to test: [disabled]="this.myTestForm.invalid || this.myTestForm.pristine"
  <div><button
               type="submit">submit</button></div>
</form>

<div *ngIf="result.length > 0 ">{{result}}</div>
<div *ngIf="myTestForm.errors === true ">ERRORS FOUND</div>

运行应用程序：在下面的ts中显示formbuilder会正确初始化输入字段，如果我在上面添加了注释的[disabled]表达式，则会正确禁用按钮。

这是ts：从'@ angular / core'导入{Component，OnInit}; 从“ @ angular / forms”导入{Validators，FormBuilder，FormGroup}；

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  myTestForm: FormGroup;
  result: string;
  AllData = {    //// wired to ngModel
    bucket: '12'
  }

  constructor(private fb: FormBuilder) {
    this.result = '';
  }

  ngOnInit() {
    this.myTestForm = this.fb.group({
      bucket: ['starting value', [Validators.required, Validators.minLength(5)]]  
<-- ngModel bucket above overrides this init value as expected -->

    });
  }

  onSubmit(value: any) { // ways to show results
    this.result = this.AllData.bucket;
    // OR //
    this.result = this.myTestForm.controls['bucket'].value;
    // OR //
    this.result = this.myTestForm.get('bucket').value;
  }
}

应用程序按预期在输入字段中以“ 12”启动。 无论我按提交按钮之前在文本框中输入了什么内容，devTools始终将myTestForm'error'属性显示为未定义。

我期望错误根据正在发生的错误的类型而具有某种字符串。

此外，我在网上搜索了如何在出现错误后立即捕获无效字段（当然是！pristine字段）的方法，但是我什么也无法工作。

任何帮助都感激不尽。

预先感谢，查克

Answer 1

我创建了一个小演示 ，对您的方法提供了建议

1. 使用反应式表单方法时，请勿使用[(ngModel)] ，因为ngModel将优先于formControl并将其值设置为该控件，而与已初始化的formcontrol's值formcontrol's 。

    <form [formGroup]="myTestForm" > <input type="text" formControlName="bucket" value="A" /> <div><button [disabled]="myTestForm.invalid || myTestForm.pristine" type="submit" >submit</button></div> </form> 

2. 要检查表单错误，请在controls上使用hasError()

    <div *ngIf="myTestForm.get('bucket').hasError('required')">Input is required</div> <div *ngIf="myTestForm.get('bucket').hasError('minlength')">Min length should be 5</div>