Question

我在 my-pin.component.html 中有以下 html：

<div class="container">
<div class="container">
    <div class="row">
        <div class="col-6" id='pinInput'>
            <form (ngSubmit)="onSubmit()"  #f>
                <label for="pin">Enter Pin</label>
                <input type="number" name="userPin" id="userPin" required ngModel #myPin="ngModel">
                <span class="help-block" *ngIf="!myPin.valid && myPinPin.touched">Please enter your pin</span>
                <button class="btn btn-primary" type="submit" [disabled]="!f.valid">Submit</button>
            </form>

        </div>
    </div>

以及 pin.module.ts 文件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PinRoutingModule } from './pin-routing.module';
import { MyPinComponent } from './my-pin/my-pin.component';
import { FormsModule } from '@angular/forms';


@NgModule({
declarations: [
MyPinComponent
],
imports: [
CommonModule,
PinRoutingModule,
FormsModule
]
})
export class PinModule { }

文件结构为pin(包含app.files)->my-pin(新模块包含模块文件和组件文件。

我在 exportAs 'ngModel' 中发现了已知的 No 指令。尝试编译时出错。我试图确保用户在数字文本框中输入一些内容（一个大头针），并在未输入数据时显示错误。

Answer 1

删除 #myPin="ngModel" 并重试

Answer 2

在您的代码 myPinPin.touched 中找到了这个，我希望这只是一个错字，如果不是，请将其更改为 myPin.touched。

 <input type="number" name="userPin" id="userPin" required ngModel #myPin="ngModel">
                <span class="help-block" *ngIf="!myPin.valid && myPin.touched">Please enter your pin</span>

同时尝试设置 ngModel，因为您使用的是模板驱动的表单。在组件（模板）中声明后如下所示

[(ngModel)]="userPin"

请在此处阅读有关 template driven form error handling 的更多信息。快乐编码.. :)

获取错误：未找到带有 exportAs 'ngModel' 的指令。在 Angular 中使用模板表单

2 个答案: