Angular 4: Beginner to Pro Course – Data Validation

Angular
1

Hi Forum,

Mosh demonstrates the validation available, specifically:

dirty; disabled; enabled; errors; invalid, valid, status, statusChanges, touched, untouched, value, valueChanges…

However, I have noticed that no matter which browser I have used (PC: Chrome, Edge, Brave) the values are not displayed as per the tutorial?

Any help would be appreciated, thank you.

mrplatypus.

2

Can you paste your Typescript and html into some code blocks for us to review? Sounds like you probably have an error.

3

@jmrunkle,

No errors notified?
I couldn’t supply the exact code to which I was referring, but I have reproduced code from the course showing the “missing” or not displayed values.

which file(s) content would you like to see?

I can supply the files in zip format, or contents of particular files?

thanks for your time

mrplatypus

4

Please share the contents of your Typescript and HTML files for the component. Also the app.module.ts file. Put them in code blocks please (surround contents with ```).

5

These will look familiar, please excuse my re-using existing code.
@jmrunkle anything else you would require?
in thinking about it more, I can see that the form values are present, just not presented in the same way as mosh did…

Anything else, please request it.

Thanks,

mrplatypus

File: app.module.ts:

Blockquote
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { AppComponent } from ‘./app.component’;
import { ContactFormComponent } from ‘./contact-form/contact-form.component’;
@NgModule({
declarations: [
AppComponent,
ContactFormComponent
],
imports: [
BrowserModule
],
providers: ,
bootstrap: [AppComponent]
})
export class AppModule { }
Blockquote

File: app.component.ts:

Blockquote
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘evidence-for-moshforum’;
}
Blockquote

File: contact-form.ts:

Blockquote
import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘contact-form’,
templateUrl: ‘./contact-form.component.html’,
styleUrls: [‘./contact-form.component.css’]
})
export class ContactFormComponent
{
log(x) {
console.log(x);
}
}
Blockquote

6

Please share your HTML files as well (for example: contact-form.component.html). Also note that a code block is different from a block quote:

Code block (surround with code fence ```)

Block quote (prefix with >)

7

I am pretty sure you are missing the FormsModule