Angular9 模块解析失败：无效数字

Question

我正在尝试使用表单上的 [ngModel] 将 class 中的数据绑定到视图，但一直收到此错误。任何帮助，将不胜感激。谢谢。

Blockquote../src/app/tdf/tdf.component.ts 19:58 Module parse failed: Invalid number (19:58) File was processed with these loaders: * ./node_modules/@ngtools/webpack/src/index.js You may need an additional loader to handle the result of these loaders. | constructor() { | this.topics = ['Angular', 'React', 'Vue']; this.userModel = new User('rob', 'rob@gmail.com', 08966736738, '', 'morning', true); | } | ngOnInit() {}. Blockquote I have not been able to find a solution. G

import { Component, OnInit } from '@angular/core';
//import {NgForm} from '@angular/forms';
import { User } from '../user';


@Component({
  selector: 'app-tdf',
  templateUrl: './tdf.component.html',
  styleUrls: ['./tdf.component.scss']
})
export class TdfComponent implements OnInit {

  topics = ['Angular', 'React', 'Vue'];
  userModel = new User('rob', 'rob@gmail.com', 08966736738, '', 'morning', true)


  ngOnInit(): void {
  }

}

<div class ="container-fluid mb-5">
    <h1>Bootcamp Enrollment Form</h1>
    <h3>Template Driven Forms TDF</h3>
    <form #userForm="ngForm">
            
        
        {{ userForm.value | json }}
<hr />
{{userModel | json}}

      
        <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control" name="username" [ngModel]="userModel.name">
        </div>

        <div class="form-group">
            <label>Email</label>
            <input type="email" class="form-control" name="email" [ngModel]="userModel.email">
        </div>

        <div class="form-group">
            <label>Phone</label>
            <input type="tel" class="form-control" name="phone" [ngModel]="userModel.phone">
        </div>


        <div class="form-group">
            <select class="custom-select" name="topic" [ngModel]="userModel.topic">
                <option selected> I am interested in:</option>
                <option *ngFor="let topic of topics"> {{topic}}</option>
            </select>
        </div>

        <div class="mb-3">
            <label>Time Preference</label>
            <div class="form-check">
                <input class="form-check-input" [ngModel]="userModel.timePreference" type="radio" name="timePreference" value="morning">
                <label class="form-check-label">Morning (9AM - 12PM)</label>
            </div>

            <div class="form-check">
                <input class="form-check-input" [ngModel]="userModel.timePreference" type="radio" name="timePreference" value="evening">
                <label class="form-check-label">Evening (5PM - 8PM)</label>
            </div>
        </div>

        <div class="form-check">
            <input class="form-check-input" type="checkbox" name="subscribe" [ngModel]="userModel.subscribe">
            <label class="form-check-label">
                Send me promotional offers.
            </label>
        </div>

        <button class="btn btn-primary" type="submit">Submit Form</button>
    </form>
</div>

Answer 1

输入类型="tel" 需要一个 dom 字符串作为模型：

参见：MDN input type tel

userModel = new User('rob', 'rob@gmail.com', 08966736738, '', 'morning', true)

-->

userModel = new User('rob', 'rob@gmail.com', '08966736738', '', 'morning', true)

Angular9 模块解析失败：无效数字

Angular 9 Module Parse failed: Invalid Number

angular

angular9