javascript - 无效输入时 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 的“错误”属性显示为未定义。

我希望错误具有某种基于正在发生的错误类型的字符串。

此外，我在网上搜索了在错误发生后立即捕获无效字段的方法(当然是 !pristine 字段)，但我什么也做不了。

任何帮助将不胜感激。

提前致谢，查克

Answer 1

我创建了一个小的 demo就您的方法提出建议

1. 当您使用响应式表单方法时，不要使用 [(ngModel)]，因为 ngModel 将优先于 formControl 并将其值设置为控件，而不考虑您已初始化的 formcontrol 的 值。

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

2. 要检查表单错误，请在控件上使用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>