Question

我是刚接触角度的新手，我有反应形式如跟

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')">

所以我可以像

一样使用

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

  </div>

但我得到的错误就像

compiler.es5.js：1690未捕获错误：模板解析错误：没有指令＆＃34; exportAs＆＃34;设置为＆＃34; registerFormGroup.get（＆＃39; email＆＃39;）＆＃34; （＆＃34; L＆GT; ] #emailForm =＆＃34; registerFormGroup.get（＆＃39;电子邮件＆＃39;）＆＃34;＆GT;

我犯了什么错误？

Answer 1

您可以创建常用功能来访问以下表单：

// Simple function

int get_chunk_index(std::vector<Chunk> chunks, int x, int y) {
    glm::vec3 target = glm::vec3(x * 40, 0, y * 40);
    for (int i = 0; i < chunks.size(); i++) {
        if (chunks[i].trans.GetPos() == target) {
            return i;
        }
    }
    return -1;
}

// End simple function

在Templete中，只要您需要在任何地方使用此调用，您只需要在功能中传递您的控件名称，您也可以根据需要修改此功能，并且您不需要一直使用validateFormControl(controName: string) { let control = registerFormGroup.get(controName); return control.invalid && control.touched; }。这使您的模板更清晰，性能更高。

form.get

Answer 2

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

中

  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>

Answer 3

试试这个：

<强> component.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>

<强> component.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])]
        });
}
}

Answer 4

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

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

Answer 5

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

诀窍是从您的组件中公开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; }

Answer 6

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

无法将表单控件分配给Reactive Forms中的模板变量 - angular？

6 个答案: