Angular ReactiveForm以编程方式触发验证

假设模板有如下代码段：

<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（）由其他一些操作调用，这些操作旨在以编程方式触发表单验证

但是，在控制台日志中，它显示addressCtrl无效，而myForm仍然有效

如果myForm的任何子控件无效，有人知道如何将其状态更新为无效吗

---

谢谢

您使用的是

formControl

指令，该指令设计为独立的，因此它不会在父

formGroup

中注册自身。如果显示该组的控件，您将看到您创建的控件不属于该组：

console.log(this.form.value);       // {}
console.log(this.myForm.controls);  // undefined

您需要使用

formControlName

指令，但为此，您必须在类中创建

formGroup

：

  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
  }

和HTML：

<form [formGroup]="group">
   <md-input-container>
     <input mdInput name="address" formControlName="address" [(ngModel)]="address" required>
   </md-input-container>
</form>

我必须查看源代码才能给出更好的答案，但更好的调试方法实际上可能是在Html中添加检查，或者在Html中添加{{myForm | json}，以防在console.log语句之后出现翻转表单有效性的标志。我已经尝试过了，但值始终为true。