Question

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

Blockquote ../ src / app / tdf / tdf.component.ts 19:58 模块解析失败：无效数字（19:58）这些加载程序已处理文件： * ./node_modules/@ngtools/webpack/src/index.js 您可能需要一个额外的加载器来处理这些加载器的结果。 | constructor（）{ | this.topics = ['Angular'，'React'，'Vue']; this.userModel = new User（'rob'，'rob@gmail.com'，08966736738，''，'morning'，true）; | } | ngOnInit（）{}。块引用我一直找不到解决方法。 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

input type =“ 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)

Angular 9模块解析失败：无效编号

1 个答案: