Question

我正在学习《 Angular5项目》一书中的Angular5教程，并在以下代码中遇到以下错误：

无法在“元素”上执行“ setAttribute”：“ novalidate（ngSubmit）”不是有效的属性名称。

这是代码： index.html：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>FormsEx200</title>
    <base href="/">
    <link href="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { NgForm, RequiredValidator } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form #appointmentForm="ngForm" novalidate(ngSubmit)="onSubmitForm(appointmentForm)">
      <legend>Appointment</legend>
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" name="name" placeholder="Name(last, first)" [(ngModel)]="_name" required>
      </div>
      <div class="form-group">
        <div class="form-check">
          <div>
            <label>Appointment Time</label>
          </div>
          <label class="form-check-label">
            <input type="radio" class="form-check-input" name="time" value="12pm" [(ngModel)]="_time" required>
            12pm
          </label>
        </div>
        <div class="form-check">
          <label class="form-check-label">
            <input type="radio" class="form-check-input" name="time" value="2pm" [(ngModel)]="_time" required>
            2pm
          </label>
        </div>
        <div class="form-check">
          <label class="form-check-label">
            <input type="radio" class="form-check-input" name="time" value="4pm" [(ngModel)]="_time" required>
            4pm
          </label>
        </div>
      </div>
      <div class="form-group">
        <label for="exampleTextarea">Ailment</label><textarea class="form-control" name="ailment" rows="3" [(ngModel)]="_ailment" required></textarea>
      </div>
      <button type="submit" class="btn btn-primary" [disabled]="!_appointmentForm.valid">Submit</button>
      Valid: {{_appointmentForm.valid}}
      Data: {{_appointmentForm.value | json}}
    </form>
  `,
  styles: ['form {padding:20px}','.form-group{padding-top:20px}']
})
export class AppComponent {
  @ViewChild('appointmentForm') _appointmentForm: NgForm;
  _name:string = 'mark';
  _password:string = '';
  _time:string = '';
  _ailment:string = '';
  onSubmitForm() {
    alert("Submitting data:" + JSON.stringify(this._appointmentForm.value));
  }
}

无法在“元素”上执行“ setAttribute”：“ novalidate（ngSubmit）”不是有效的属性名称

0 个答案: