html必須属性が機能しません

Question

単純なフォームに送信するためにAngular cliを使用していますが、入力要素の必須属性が機能しません。入力してもフォームを送信することはできますが、フォーム要素。私は解決策を見つけましたが、どういうわけか私はそれをまだ分かりません。前もって感謝します。ここで

はhtmlコードです：

<form (submit)="onAddSubmit()"> 
    <div class="form-group"> 
    <label>Title</label> 
    <input class="form-control" type="text" [(ngModel)]="title" name="title" required> 
    </div> 
    <div class="form-group"> 
    <label>City</label> 
    <input class="form-control" type="text" [(ngModel)]="city" name="city" required> 
    </div> 
    <div class="form-group"> 
    <label>Owner</label> 
    <input class="form-control" type="text" [(ngModel)]="owner" name="owner" required> 
    </div> 
    <div class="form-group"> 
    <label>Bedrooms</label> 
    <input class="form-control" type="number" [(ngModel)]="bedrooms" name="bedrooms" required> 
    </div> 
    <div class="form-group"> 
    <label>Type</label> 
    <select class="form-control" type="text" [(ngModel)]="type" name="type" required> 
     <option value="Estate">Estate</option> 
     <option value="Condo">Condo</option> 
     <option value="Apartment">Apartment</option> 
    </select> 
    </div> 
    <div class="form-group"> 
    <input id="image" name="image" [(ngModel)]="image" type="file" > 
    </div> 
    <div class="form-group"> 
    <label>Price</label> 
    <input class="form-control" type="text" [(ngModel)]="price" name="price" required> 
    </div> 
    <input type="submit" value="Submit" class="btn btn-success"> 
</form> 

Answer 1

は、検証を達成するために、角からの反応形式を使用します。以下の例を参考にしてください。

import { 
    FormBuilder, 
    FormGroup, 
    Validators 
} from '@angular/forms'; 


export class AppComponent implements OnInit { 

    registerForm: FormGroup; 

    constructor(private formBuilder: FormBuilder) {} 

ngOnInit() { 
    this.registerForm = this.formBuilder.group({ 
    firstname: ['', Validators.required], 
    lastname: ['', Validators.required] 
    }); 
} 
} 


Html template 

<form [formGroup]="registerForm"> 
    <label>Firstname:</label> 
    <input type="text" formControlName="firstname"> 
    <p *ngIf="registerForm.controls.firstname.errors">This field is required!</p> 

    <label>Lastname:</label> 
    <input type="text" formControlName="lastname"> 
    <p *ngIf="registerForm.controls.lastname.errors">This field is required!</p> 

</form>