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

Question

I'd like to use an angular '#' variable outside of its div to disable a button based on the state of the '#' variable.

<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>

The method above doesn't work as validEmail in the button is undefined. What is a better method to accomplish this?

.ts file

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

Answer 1

I recommend using Reactive Forms approach in order to do this. You can apply your pattern and other validators in your Component Class and just bind the form control using [formControl] attribute binding syntax. Something like this:

<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>

And in your Component Class:

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 */

---

Here's a Working Sample StackBlitz for your ref.