如何使用打字稿获取html元素的名称属性？

Question

in my code I'm using the name attribute to check whether the user has entered in that field or not and checking if the field is valid. Now, I have a submit button but I want the submit button to only be active when the user has entered of field correctly. So I have a code that checks whether the field is empty or not and enables the submit button, however, I want to only activate the submit button only when the fields are valid not when there isnt an empty field

<form>
<div>
  <label>Name</label>
    <input 
      id="userName" 
      required ngModel 
      name="Name"  
      #Name="ngModel"
      class="form-control" />
    <span 
      class="text-danger" 
      *ngIf="Name.touched && !Name.valid">Please enter your name</span>
 </div>
 <div>
                      <label>Email</label>
                      <input id="userEmail" required email class="form-control" name="Email" ngModel #Email="ngModel" type="email" />
                      <div class="text-danger" *ngIf="Email.touched && !Email.valid">Please enter a valid email</div>
                  </div>
                  <div>
                    <label>Subject</label>
                    <input id="userSubject" required ngModel name="Subject" #Subject="ngModel" class="form-control" />
                    <span class="text-danger" *ngIf="Subject.touched && !Subject.valid">Please enter the subject</span>
                  </div>
                  <div>
                      <label>Message</label>
                      <textarea 
                        id="userMessage"
                        required 
                        ngModel 
                        name="message" 
                        #message="ngModel" 
                        minlength="10" 
                        cols="40" 
                        rows="4" 
                        class="form-control">
                    </textarea>
                      <div *ngIf="message.touched && !message.valid" class="text-danger">A message of at least 10 characters is required</div>
                  </div>
                  <div style="padding-top:10px;">
                      <input type="submit" id="sendMessage" value="Send Message" class="btn btn-primary" disabled="disabled" />
                  </div>
                  <div class="text-success"></div>
              </form> 


Typescript:
@HostListener('window:load') Scroll(): void {
    $('#userName, #userEmail, #userSubject, #userMessage').keyup(function() {
      var empty = false;
      $('#userName, #userEmail, #userSubject, #userMessage').each(function() {
          if ($(this).val() == '') {
              empty = true;
          }
      });

      if (empty) {
          $('#sendMessage').attr('disabled', 'disabled'); 
      } else {
          $('#sendMessage').removeAttr('disabled');
      }
    });
}

Answer 1

You don't need to implement a host listener. just use NgForm and FormGroup supported by Angular 2.

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, ReactiveFormsModule ], declarations: [ AppComponent ], bootstrap: [AppComponent] }) export class AppModule { } import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app', templateUrl: 'app.component.html' }) export class AppComponent implements OnInit { registerForm: FormGroup; submitted = false; constructor(private formBuilder: FormBuilder) { } ngOnInit() { this.registerForm = this.formBuilder.group({ firstName: ['', Validators.required], lastName: ['', Validators.required], email: ['', [Validators.required, Validators.email]], password: ['', [Validators.required, Validators.minLength(6)]] }); } // convenience getter for easy access to form fields get f() { return this.registerForm.controls; } } 

 <div class="jumbotron"> <div class="container"> <div class="row"> <div class="col-md-6 offset-md-3"> <h2>Angular 6 Reactive Form Validation</h2> <form [formGroup]="registerForm" (ngSubmit)="onSubmit()"> <div class="form-group"> <label>First Name</label> <input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" /> <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback"> <div *ngIf="f.firstName.errors.required">First Name is required</div> </div> </div> <div class="form-group"> <label>Last Name</label> <input type="text" formControlName="lastName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }" /> <div *ngIf="submitted && f.lastName.errors" class="invalid-feedback"> <div *ngIf="f.lastName.errors.required">Last Name is required</div> </div> </div> <div class="form-group"> <label>Email</label> <input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" /> <div *ngIf="submitted && f.email.errors" class="invalid-feedback"> <div *ngIf="f.email.errors.required">Email is required</div> <div *ngIf="f.email.errors.email">Email must be a valid email address</div> </div> </div> <div class="form-group"> <label>Password</label> <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" /> <div *ngIf="submitted && f.password.errors" class="invalid-feedback"> <div *ngIf="f.password.errors.required">Password is required</div> <div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div> </div> </div> <div class="form-group"> <button [disabled]="loading" class="btn btn-primary">Register</button> </div> </form> </div> </div> </div> </div> 

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, ReactiveFormsModule ], declarations: [ AppComponent ], bootstrap: [AppComponent] }) export class AppModule { } import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app', templateUrl: 'app.component.html' }) export class AppComponent implements OnInit { registerForm: FormGroup; submitted = false; constructor(private formBuilder: FormBuilder) { } ngOnInit() { this.registerForm = this.formBuilder.group({ firstName: ['', Validators.required], lastName: ['', Validators.required], email: ['', [Validators.required, Validators.email]], password: ['', [Validators.required, Validators.minLength(6)]] }); } // convenience getter for easy access to form fields get f() { return this.registerForm.controls; } } 

 <div class="jumbotron"> <div class="container"> <div class="row"> <div class="col-md-6 offset-md-3"> <h2>Angular 6 Reactive Form Validation</h2> <form [formGroup]="registerForm" (ngSubmit)="onSubmit()"> <div class="form-group"> <label>First Name</label> <input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" /> <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback"> <div *ngIf="f.firstName.errors.required">First Name is required</div> </div> </div> <div class="form-group"> <label>Last Name</label> <input type="text" formControlName="lastName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }" /> <div *ngIf="submitted && f.lastName.errors" class="invalid-feedback"> <div *ngIf="f.lastName.errors.required">Last Name is required</div> </div> </div> <div class="form-group"> <label>Email</label> <input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" /> <div *ngIf="submitted && f.email.errors" class="invalid-feedback"> <div *ngIf="f.email.errors.required">Email is required</div> <div *ngIf="f.email.errors.email">Email must be a valid email address</div> </div> </div> <div class="form-group"> <label>Password</label> <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" /> <div *ngIf="submitted && f.password.errors" class="invalid-feedback"> <div *ngIf="f.password.errors.required">Password is required</div> <div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div> </div> </div> <div class="form-group"> <button [disabled]="!registerForm.valid" class="btn btn-primary">Register</button> </div> </form> </div> </div> </div> </div>