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

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。