Question

我在Angular2中有这样的表格：

 #modal-2 {
        overflow-y:scroll;
    }

组件代码如下：

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input type="text" id="name" formControlName="name" value="{{elementToEdit?.name}}">
  <button type="submit" [disabled]="!form.valid">Save</button>
</form>

我这样做是因为我有相同的形式来编辑现有元素并创建新元素，如果在export class ElementEditComponent implements OnInit { form: FormGroup; elementToEdit: Element; constructor(fb: FormBuilder, private elementService: ElementService) { this.form = fb.group({ "name": new FormControl("", Validators.required) }); } ngOnInit() { this.route.params .switchMap((params: Params) => this.recipeService.getElement(+params['id'])) .subscribe(element => this.elementToEdit = element); } }我尝试从服务中获取元素，以防我收到一个id在参数中。如果是这样，当我收到元素时，我将其设置为ngOnInit。

到目前为止，此工作正常，elementToEdit在收到元素后立即获取值。我遇到的问题是，当发生这种情况时，表单的验证不会被触发，因此即使输入不为空，按钮也会显示为禁用。

有谁知道如何解决这个问题，以便在输入值改变时触发表单验证？

Answer 1

使用反应形式，您不会直接将值绑定到模板中，这就是toString的用途。而是更新FormGroup实例并让Angular更新显示的值，验证状态等：

formControlName

我建议您浏览文档：https://angular.io/docs/ts/latest/guide/reactive-forms.html

如果以编程方式设置输入值，则表单不会触发验证

1 个答案: