Javascript 输入无效时未定义角度5 FormBuilder错误

[作为一名新手，他试图将此应用到plnkr中，但未能实现；在json中添加@angular/forms时遇到问题。]

目的：解决在FormBuilder中完成所有工作所需的知识 HTML:

//添加到要测试的按钮：[已禁用]=“this.myTestForm.invalid | | this.myTestForm.pristine”
提交
{{result}}
发现的错误

运行应用程序：显示下面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;
  }
}

@组件({
选择器：“应用程序主页”，
templateUrl:“./home.component.html”，
样式URL:['./home.component.css']
})
导出类HomeComponent实现OnInit{
myTestForm:FormGroup；
结果：字符串；
AllData={///连接到ngModel
桶：“12”
}
构造函数（私有fb:FormBuilder）{
结果=''；
}
恩戈尼尼特（）{
this.myTestForm=this.fb.group({
bucket:['起始值'，[Validators.required，Validators.minLength（5）]]
});
}
onSubmit（value:any）{//显示结果的方法
this.result=this.AllData.bucket；
//或//
this.result=this.myTestForm.controls['bucket'].value；
//或//
this.result=this.myTestForm.get（'bucket'）.value；
}
}

应用程序按预期在输入字段中以“12”初始化。无论我在按下submit按钮之前在文本框中输入了什么，devTools总是将myTestForm“error”属性显示为未定义

根据发生的错误类型，我希望错误具有某种类型的字符串

此外，我在网络上搜寻各种方法，以便在错误发生时立即捕获无效字段（当然是！原始字段），但我找不到任何有效的方法

任何帮助都将不胜感激

提前感谢,， Chuck

我创建了一个小型项目，为您的方法提供建议

当您使用反应式表单方法时，不要使用

[（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>

---

你想用ngModel做什么？只使用被动形式的值。哇。。。我明白了。ngModel的原因仅仅是设置/获取值的一种方法。我没有意识到它干扰了formControl。（显然，我不需要ngModel）。你的答案正是我需要的。非常感谢。查克（瑜伽士）

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

<div *ngIf="myTestForm.get('bucket').hasError('required')">Input is required</div>

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