Angular 5 属性从同一组件的组件 html 内绑定(bind)

Question

我使用属性 isPersonalInfoValid 作为向导组件的标志

我想要emailform.valid(emailForm只是对下面html中显示的ngForm的引用)来更新组件属性[isPersonalInfoValid]，我尝试了很多方法但没有奏效，目前这个 [(isPersonalInfoValid)] 被视为 emailForm 的属性，这是错误的，我想将它用作个人信息组件的属性。

下面的代码来自personal-info.component.html

<form #emailForm="ngForm" [(isPersonalInfoValid)]="emailForm.valid">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" name="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"
      [(ngModel)]="data.email" required email>

personal-info.component.ts的代码如下:

import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
import { FormWizardModule } from 'angular2-wizard';

@Component({
  selector: 'app-personal-info',
  templateUrl: './personal-info.component.html',
  styleUrls: ['./personal-info.component.css'],
  // encapsulation: ViewEncapsulation.None
})
export class PersonalInfoComponent implements OnInit {

  @Input() isPersonalInfoValid = false;
  data: any = {
    email: '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e7f7c7d5e79737f7772307d7173" rel="noreferrer noopener nofollow">[email protected]</a>'
  };
  constructor() { }

  ngOnInit() {
  }

  onStep1Next(event) {
    console.log('Step1 - Next');
  }

  onStepChanged(step) {
    console.log('Changed to ' + step.title);
}

}

非常感谢您的帮助，谢谢

编辑:

仅当我使用组件选择器(在另一个组件中)时，我才能绑定(bind)该属性，但随后我无法访问 form.valid 属性，如下所示

<app-personal-info #personalInfo  [isPersonalInfoValid]="emailForm.valid ></app-personal-info>

我需要进行绑定(bind)，以便 form.valid 更改属性 isPersonalInfoValid

编辑2:

代码是here

Answer 1

不需要创建另一个变量来检查表单的有效性。在您需要的地方访问form。在您的情况下，父组件需要访问子组件中的 form 。根据官方文档可以通过两种方式解决:

1. 再多一点代码。您可以通过将子组件作为 ViewChild 注入(inject)到父组件中来访问子组件。了解更多:Parent calls an @ViewChild()
2. 简单又容易的方法。如果您只想在父组件模板中访问子组件，请使用局部变量(#var)。了解更多:Parent interacts with child via local variable

对于你的情况，我已经@ViewChild方法。它使您可以完全访问子组件，但也比使用局部变量的第二种方法多了一些代码。

ViewChild Decorator. Official doc.

获取对父 WizardComponent 中子 PersonalInfoComponent 组件的访问权限:

 ...
 @ViewChild(PersonalInfoComponent)
  private personalInfo: PersonalInfoComponent;
 ...

在子PersonalInfoComponent中，与上面类似地访问emailForm:

@ViewChild('emailForm') emailForm: NgForm 

然后，在父 WizardComponent 中，您可以获取 emailForm 抛出 PersonalInfoComponent 子组件。并将其作为 personalInfo.emailForm.valid

传递给 wizard-step 组件

WizardComponent.html:

  ...
  <wizard-step [title]="'Personal Information'" [isValid]="personalInfo.emailForm.valid" (onNext)="onStep1Next($event)">
          <app-personal-info #personalInfo></app-personal-info>

  </wizard-step>
  ...

StackBlitz EXAMPLE