Failed to execute 'setAttribute' on 'Element': 'novalidate(ngSubmit)' is not a valid attribute name

up vote
0
down vote

favorite

I'm following a Angular5 tutorial from the book Angular5 Projects and getting the following error in the code below:

Failed to execute 'setAttribute' on 'Element': 'novalidate(ngSubmit)' is not a valid attribute name.

Here is the code:
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));

  }

}

edited 11 hours ago

Cœur

16.8k9101139

asked Oct 13 at 21:59

rds80

808

add a comment |

up vote
0
down vote

favorite

I'm following a Angular5 tutorial from the book Angular5 Projects and getting the following error in the code below:

Failed to execute 'setAttribute' on 'Element': 'novalidate(ngSubmit)' is not a valid attribute name.

Here is the code:
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));

  }

}

edited 11 hours ago

Cœur

16.8k9101139

asked Oct 13 at 21:59

rds80

808

add a comment |

up vote
0
down vote

favorite

I'm following a Angular5 tutorial from the book Angular5 Projects and getting the following error in the code below:

Failed to execute 'setAttribute' on 'Element': 'novalidate(ngSubmit)' is not a valid attribute name.

Here is the code:
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));

  }

}

edited 11 hours ago

Cœur

16.8k9101139

asked Oct 13 at 21:59

rds80

808

I'm following a Angular5 tutorial from the book Angular5 Projects and getting the following error in the code below:

Failed to execute 'setAttribute' on 'Element': 'novalidate(ngSubmit)' is not a valid attribute name.

Here is the code:
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));

  }

}

angular angular5

edited 11 hours ago

Cœur

16.8k9101139

asked Oct 13 at 21:59

rds80

808

edited 11 hours ago

Cœur

16.8k9101139

asked Oct 13 at 21:59

rds80

808

edited 11 hours ago

Cœur

16.8k9101139

edited 11 hours ago

Cœur

16.8k9101139

edited 11 hours ago

Cœur

16.8k9101139

asked Oct 13 at 21:59

rds80

808

asked Oct 13 at 21:59

rds80

808

asked Oct 13 at 21:59

rds80

808

add a comment |

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52797709%2ffailed-to-execute-setattribute-on-element-novalidatengsubmit-is-not-a-v%23new-answer', 'question_page');
}
);

Post as a guest

Name

active

oldest

votes

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky