Form not displaying "required" dialog in Angular 2 - html

Question

I am new to Angular 2. So, I have this form where I created with Angular 2, and bootstrap. So, when you click on the text field and move the mouse else where, the box turns red (which is good). But, when they click on submit button, it when the form is empty, it won't show the "required" dialog. So, please check my code of what I did wrong. Thank you!
I want to show this when they click on a empty form:
Here is the code.
<div class="col-md-8 col-md-offset-2">
<form (ngSubmit)="onSubmit(form)" #form="ngForm">
<div class="form-group">
<label for="content">Content</label>
<input type="text"
id="content"
class="form-control"
ngModel
name="content"
required>
</div>
<button class="btn btn-primary" type="submit">Save</button>
</form>
</div>
Second Part:(TypeScript)
import { Component } from "#angular/core";
import {MessageService} from "./message.service";
import {Message} from "./message.model";
import {NgForm} from "#angular/forms";
#Component({
selector: 'app-message-input',
templateUrl: './message-input.component.html'
})
export class MessageInputComponent {
constructor(private messageService: MessageService) {}
onSubmit(form: NgForm) {
const message = new Message(form.value.content, 'John');
this.messageService.addMessage(message);
form.resetForm();
}
}

Answer 1

I fixed my answer by enabling the default HTML validation. Becuase for some reason in Angular, the default HTML validation is disabled by Angular. So, I enabled it by doing:
<div class="col-md-8 col-md-offset-2">
<form ngNativeValidate (ngSubmit)="onSubmit(f)" #f="ngForm">
<div class="form-group">
<label for="content">Content</label>
<input
type="text"
id="content"
class="form-control"
ngModel
name="content"
required>
</div>
<button class="btn btn-primary" type="submit">Save</button>
</form>
I just add ngNativeValidate in my form tags.