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>