Question

我想在其div之外使用有角度的'＃'变量来基于'＃'变量的状态禁用按钮。

<mat-form-field style="margin-bottom: -.40rem; width: 100%">
                        <input id="email-{{i}}" spellcheck="false" matInput type="text" placeholder="Email  Address" [(ngModel)]="email.email"
                         pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" #validEmail="ngModel">
                         <mat-error *ngIf="validEmail.errors">
                            Please enter a valid email address
                        </mat-error>
                    </mat-form-field>
<td class="center-table-body">
                    <input type="checkbox" [(ngModel)]="email.standard_no_tradins">
                </td>
                <td class="center-table-body">
                    <input type="checkbox" [(ngModel)]="email.standard_include_tradins">
                </td>
                <td class="center-table-body">
                    <input type="checkbox" [(ngModel)]="email.adf_include_tradins">
                </td>
                <td class="center-table-body">
                    <input type="checkbox" [(ngModel)]="email.adf_no_tradins">
                </td>

<button mat-raised-button class="mat-white-button green-button" (click)="updateSettings()" [disabled]="saving || validEmail.errors">
        <i *ngIf="!saving" class="fa fa-floppy-o"></i>
        <button-spinner *ngIf="saving"></button-spinner>
        Save
    </button>

上述方法无效，因为按钮中的validEmail未定义。有什么更好的方法可以做到这一点？

.ts文件

addEmail() {
    this.EmailsToSave.push({
        email: '',
        adf_no_tradins: false,
        adf_include_tradins: false,
        standard_include_tradins: false,
        standard_no_tradins: false,
    });

Answer 1

我建议使用“反应形式”方法来执行此操作。您可以在组件类中应用模式和其他验证器，并仅使用[formControl]属性绑定语法来绑定表单控件。像这样：

<mat-form-field style="margin-bottom: -.40rem; width: 100%">
    <input 
    id="email-{{i}}" 
    spellcheck="false" 
    matInput 
    type="email" 
    placeholder="Email  Address" 
    [formControl]="email">
    <mat-error 
      *ngIf="email.errors">
      Please enter a valid email address
    </mat-error>
</mat-form-field>

<button 
  mat-raised-button 
  class="mat-white-button green-button" 
  (click)="updateSettings()" 
  [disabled]="saving || email.errors">
  <i *ngIf="!saving" class="fa fa-floppy-o"></i>
  <mat-progress-bar *ngIf="saving" mode="indeterminate"></mat-progress-bar>
  Save
</button>

在您的组件类中：

import {Component} from '@angular/core';
import {FormControl, Validators} from '@angular/forms';

/** @title Form field with error messages */
@Component({
  selector: 'form-field-error-example',
  templateUrl: 'form-field-error-example.html',
  styleUrls: ['form-field-error-example.css'],
})
export class FormFieldErrorExample {

  email = new FormControl('', [Validators.required, Validators.pattern('[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}')]);

  getErrorMessage() {
    return this.email.hasError('required') ? 'You must enter a value' :
        this.email.hasError('email') ? 'Not a valid email' :
            '';
  }
}


/**  Copyright 2018 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

这是您推荐的Working Sample StackBlitz。

如何在模板范围之外使用角度局部变量？

1 个答案: