1

我是角度的新手，可以说，我有如下反应形式

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>

例如，电子邮件字段有两个验证，例如required和email类型验证所以取决于我必须显示错误消息的错误，所以在我的模板中使用类似

<div *ngIf="!registerFormGroup.get('email').valid && (registerFormGroup.get('email').touched)" 
  class="alert alert-danger">

  </div>

registerFormGroup.get('email') 我没有一次又一次地添加相同的内容，而是尝试创建模板表达式#emailForm="registerFormGroup.get('email')"，如

<input type="email" formControlName="email" placeholder="Enter Email" class="form-control" #emailForm="registerFormGroup.get('email')">

这样我就可以使用 like

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

  </div>

但我收到了类似的错误

compiler.es5.js:1690 未捕获错误：模板解析错误：没有将“exportAs”设置为“registerFormGroup.get('email')”的指令（“l> ]#emailForm="registerFormGroup.get('email' )">

我犯了什么错误？？

4

6 回答 6

3

您可以创建通用函数来访问如下表单：

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>
于 2017-09-09T06:24:29.340 回答
1

在组件上创建一个方法，如果表单有效则返回，并在组件中返回

  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>
于 2017-09-09T05:55:45.697 回答
0

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

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

<input id="name" class="form-control"
     formControlName="name" required
     [class.is-invalid]="
     f.name.invalid &&
     (f.name.touched ||
     f.name.touched.dirty)">


零件：

  //easily access your form fields
  get f() { return this.checkoutForm.controls; }
于 2019-07-31T09:28:19.910 回答
0

我也在寻找比多次调用 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 功能创建模板变量

于 2020-05-12T15:30:50.173 回答
0

尝试这个 ：

组件.html

<div class="container">
    <form [formGroup]="registerFormGroup" 
    (ngFormSubmit)="registerUser(registerFormGroup.value)" novalidate>
    <div class="form-group" [ngClass]="{'has-error':!registerFormGroup.controls['email'].valid}">
        <label for="email">Email</label>
        <input type="email" formControlName="email" placeholder="Enter Email" 
        class="form-control">
        <p class="alert alert-danger" *ngIf="registerFormGroup.controls['email'].dirty && !registerFormGroup.controls['email'].valid">Invalid email address</p>
    </div>
    <div class="form-group text-center">
        <button type="submit" class="btn btn-primary" [disabled]="!registerFormGroup.valid">Submit</button>
    </div>
</form>
</div>

组件.ts

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

export class AppComponent implements OnInit {
registerFormGroup: any;
constructor(
        private formBuilder: FormBuilder
    ) {}

ngOnInit() {
this.registerFormGroup = this.formBuilder.group({
            email: [null , Validators.compose([Validators.required, Validators.email])]
        });
}
}
于 2017-09-09T05:51:42.003 回答
0

由于更改检测策略，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>

将它复制粘贴到模板中仍然很安静，但至少您可以通过它的模板变量直接引用控制。我个人仍然使用控制器吸气剂功能，但为了答案的完整性，我发布了这个答案。

于 2018-07-19T12:23:18.623 回答