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>