Here is the HTML code from my-pin.component.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>
Also, this is the content of the pin.module.ts file:
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 { }
The structure of files follows this pattern: pin (contains app.files) -> my-pin (a new module with module files and component files).
Upon compiling, I encountered a 'No directive found with exportAs 'ngModel'' error. The objective is to enforce user input in a number textbox (for a pin) and display an error if no data is entered.