Angular ReactiveForm以编程方式触发验证

时间:2017-07-14 00:48:33

标签: angular angular-forms

假设模板包含如下代码段:

<form #myForm="ngForm">
   <md-input-container>
     <input mdInput name="address" [formControl]="addressCtrl" [(ngModel)]="address" required>
   </md-input-container>
</form>

组件有这样的东西:

export class AddressComponent {
   @ViewChild("myForm")
   myForm: NgForm;

   addressCtrl = new FormControl();
   address: string;

   constructor() {}

   validate() {
      this.addressCtrl.markAsTouched();
      console.log("Is address valid? " + this.addressCtrl.valid);
      console.log("Is myForm valid? " + this.myForm.form.valid);
   }
}

validate()由一些其他操作调用,旨在以编程方式触发表单验证。

但是,在控制台日志中,它显示当myForm仍然有效时,addressCtrl无效。

如果任何子控件无效,任何人都知道如何将myForm状态更新为无效?

谢谢!

1 个答案:

答案 0 :(得分:1)

您正在使用from bs4 import BeautifulSoup from selenium import webdriver from selenium.webdriver.common.keys import Keys driver = webdriver.Firefox() driver.get("http://www.python.org") 指令,该指令是独立的,因此它不会在父formControl中注册自己。如果显示组的控件,您将看到您创建的控件不属于该组:

formGroup

您需要使用console.log(this.form.value); // {} console.log(this.myForm.controls); // undefined 指令,但为此您必须在班级中创建formControlName

formGroup

和HTML:

  addressCtrl = new FormControl();
  group = new FormGroup({address: this.addressCtrl});

  validate() {
    console.log('Is address valid? ' + this.addressCtrl.valid); // false
    console.log('Is myForm valid? ' + this.group.valid);        // false
  }