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 中的表单生成器正确初始化输入字段，如果我添加上面评论的 [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

我创建了一个小 demo 来提供关于您的方法的建议

当你使用响应式方法时，不要使用 [(ngModel)]，因为 ngModel 将优先于 formControl 并将其值设置为控件，而不管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>

要检查表单错误，请在 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>

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

Angular 5 FormBuilder errors undefined when invalid input

javascript

validation

formbuilder

angular