Javascript 无法将表单控件分配给被动表单中的模板变量-角度？

我是个新手，比如说，我有跟follow一样的反应形式

ngOnInit() {
this.registerFormGroup = this.formBuilder.group({
    email: [ '', Validators.compose([Validators.required, Validators.email])],
    password: this.formBuilder.group({
    first: [ '', Validators.required ],
    second: [ '', Validators.required,  ] 
    })
  });
}

<div class="container">
  <form [formGroup]="registerFormGroup" 
    (ngFormSubmit)="registerUser(registerFormGroup.value)" novalidate>
<div class="form-group" >
    <label for="email">Email</label>
    <input type="email" formControlName="email" placeholder="Enter Email" 
   class="form-control">
</div>
<div *ngIf="!registerFormGroup.get('password').get('first').valid" 
     class="alert alert-danger">

</div>

<div class="form-group text-center">
  <button type="submit" class="btn btn-success btn-lg" 
  [disabled]="!registerFormGroup.valid">Submit</button>
</div>

我的角度模板如下所示

ngOnInit() {
this.registerFormGroup = this.formBuilder.group({
    email: [ '', Validators.compose([Validators.required, Validators.email])],
    password: this.formBuilder.group({
    first: [ '', Validators.required ],
    second: [ '', Validators.required,  ] 
    })
  });
}

<div class="container">
  <form [formGroup]="registerFormGroup" 
    (ngFormSubmit)="registerUser(registerFormGroup.value)" novalidate>
<div class="form-group" >
    <label for="email">Email</label>
    <input type="email" formControlName="email" placeholder="Enter Email" 
   class="form-control">
</div>
<div *ngIf="!registerFormGroup.get('password').get('first').valid" 
     class="alert alert-danger">

</div>

<div class="form-group text-center">
  <button type="submit" class="btn btn-success btn-lg" 
  [disabled]="!registerFormGroup.valid">Submit</button>
</div>

而不是添加相同的registerFormGroup.get'email'一次又一次，我试图创建类似emailForm=registerFormGroup.get'email'的模板表达式

这样我就可以像

<div *ngIf="!emailForm.valid" class="alert alert-danger">

  </div>

但我得到的错误就像

compiler.es5.js:1690未捕获错误：模板分析错误： 没有将exportAs设置为RegisterPerformGroup的指令。获取'email'l> ]emailForm=RegisterPerformGroup。获取“电子邮件”>

我犯了什么错误？？？

试试这个：

component.html

试试这个：

component.html

---

在组件上创建一个返回表单是否有效的方法，并在组件中返回它

  checkError(){ // either you can pass the form from the template or use the component for decleration
    return registerFormGroup.get('email').valid;
  }

在模板调用中

  <div *ngIf="checkError()" class="alert alert-danger">
    // Always make sure not to use controls in the template it will result in AOT compilation error
  </div>

---

在组件上创建一个返回表单是否有效的方法，并在组件中返回它

  checkError(){ // either you can pass the form from the template or use the component for decleration
    return registerFormGroup.get('email').valid;
  }

在模板调用中

  <div *ngIf="checkError()" class="alert alert-danger">
    // Always make sure not to use controls in the template it will result in AOT compilation error
  </div>

---

您可以创建公共函数来访问表单，如下所示：

validateFormControl(controName: string) {
    let control = registerFormGroup.get(controName);
    return control.invalid && control.touched;
}

在Templete中，您可以在任何需要的地方使用此调用，只需在函数中传递控件名，也可以根据需要修改此函数，而不需要一直使用form.get。这会使模板更干净、性能更高效

<div *ngIf="validateFormControl('email')" 
  class="alert alert-danger">
  error message
</div>

<div *ngIf="validateFormControl('password')" 
      class="alert alert-danger">
   error message
</div>

---

您可以创建公共函数来访问表单，如下所示：

validateFormControl(controName: string) {
    let control = registerFormGroup.get(controName);
    return control.invalid && control.touched;
}

在Templete中，您可以在任何需要的地方使用此调用，只需在函数中传递控件名，也可以根据需要修改此函数，而不需要一直使用form.get。这会使模板更干净、性能更高效

<div *ngIf="validateFormControl('email')" 
  class="alert alert-danger">
  error message
</div>

<div *ngIf="validateFormControl('password')" 
      class="alert alert-danger">
   error message
</div>

---

Angular团队强烈反对在模板中使用函数输出，因为更改检测策略。您可能对使用ngForm指令的以下解决方案感兴趣：

<div class="container">
  <form [formGroup]="registerFormGroup" 
    (ngFormSubmit)="registerUser(registerFormGroup.value)" novalidate>
<div class="form-group" >
    <label for="email">Email</label>
    <input type="email" formControlName="email" placeholder="Enter Email " 
   class="form-control" #email="ngForm">
</div>
<div *ngIf="email.invalid" 
     class="alert alert-danger">

</div>

---

在模板中复制粘贴它仍然是一种沉默，但至少您可以通过它的模板变量直接引用控件。我个人仍然使用controller getter函数，但为了答案的完整性，我发布了这个答案。

由于检测策略的改变，Angular团队强烈反对在模板中使用函数输出。您可能对使用ngForm指令的以下解决方案感兴趣：

<div class="container">
  <form [formGroup]="registerFormGroup" 
    (ngFormSubmit)="registerUser(registerFormGroup.value)" novalidate>
<div class="form-group" >
    <label for="email">Email</label>
    <input type="email" formControlName="email" placeholder="Enter Email " 
   class="form-control" #email="ngForm">
</div>
<div *ngIf="email.invalid" 
     class="alert alert-danger">

</div>

---

在模板中复制粘贴它仍然是一种沉默，但至少您可以通过它的模板变量直接引用控件。我个人仍然使用controller getter函数，但是为了答案的完整性，我发布了这个答案。

虽然我同意接受的答案，但是您应该在表单组件中有一个专用的方法来封装验证过程 有时您需要快速检查模板：

诀窍是从组件中公开formGroup，并像这样使用它： 模板：

---

虽然我同意接受的答案，但在表单组件中应该有一个专用的方法来封装验证过程 有时您需要快速检查模板：

诀窍是从组件中公开formGroup，并像这样使用它： 模板：

---

我也在寻找一个比多次调用form.get更优雅的解决方案。下面是我使用ngif的想法

 <div class="col-sm-6" *ngIf="form.get('sponsor') as sponsor">

            <input type="text" formControlName="sponsor" id="sponsor" class="form-control" name="sponsor"
              [class.is-invalid]="sponsor.errors && sponsor.touched">

        </div>

---

使用ngIf上的as功能创建一个模板变量

我也在寻找一个比多次调用form.get更优雅的解决方案。下面是我使用ngif的想法

 <div class="col-sm-6" *ngIf="form.get('sponsor') as sponsor">

            <input type="text" formControlName="sponsor" id="sponsor" class="form-control" name="sponsor"
              [class.is-invalid]="sponsor.errors && sponsor.touched">

        </div>

---

使用ngIf上的as功能创建模板变量

模板变量不是普通变量。它们不能保存这样的任意值。检查这个@HarryNinh谢谢你提供的信息，我想在模板驱动中使用like name=ngModelforms@Robert该链接用于模板驱动，其中分配标题=ngModel，但在被动形式中，我们不能正确使用ngModel。两者相似，请参阅这一模板变量不是普通变量。它们不能保存这样的任意值。检查这个@HarryNinh谢谢你提供的信息，我想在模板驱动中使用like name=ngModelforms@Robert该链接用于模板驱动，其中分配标题=ngModel，但在被动形式中，我们不能正确使用ngModel。两者相似，参考这一条，这是如何提高性能效率的？这不正相反吗？这是如何提高性能效率的？这不正相反吗？