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的“错误”属性显示为未定义。

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

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

任何帮助将不胜感激。

预先感谢，卡盘

Answer 1

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

使用反应式表单方法时请勿使用[(ngModel)]，因为ngModel将优先于formControl并将其值设置为控件，而与{{1 }}值，您已经初始化。
```
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>上使用hasError()
```
controls
```

输入无效时，不确定Angular 5 FormBuilder错误

1 个答案: