フォームにAngular 2の "required"ダイアログが表示されない

Question

私はAngular 2が初めてです。このため、Angular 2とBootstrapで作成したこのフォームがあります。だから、テキストフィールドをクリックしてマウスを動かすと、ボックスは赤色に変わります（これはいいです）。しかし、送信ボタンをクリックすると、フォームが空のときに「必須」ダイアログが表示されません。だから、私が間違っていたことの私のコードをチェックしてください。ありがとうございました！ 空のフォームをクリックしたときにこれを表示します。

ここにコードがあります。

<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> 

第二部：（活字体）

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

私は、デフォルトのHTMLの検証を可能にすることによって、私の答えを修正しました。何らかの理由でAngularで動作した場合、デフォルトのHTML検証はAngularによって無効にされます。だから、私はやってそれを有効に：

<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> 

私はちょうど私のフォームタグでngNativeValidateを追加します。