当我尝试提交表单时,“电子邮件”未显示在控制台中,但是当我删除formControl时,此命令正常工作,但是我的电子邮件输入没有被选中。你能告诉我如何解决吗?
<form (ngSubmit)="onSubmit(f)" #f="ngForm" >
<div class="example-container">
<mat-form-field>
<input class="form" ngModel name="Name" matInput placeholder="Name" required>
</mat-form-field>
<mat-form-field>
<input [formControl]="email" class="form" ngModel name="email" matInput placeholder="Enter your email" required>
<mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
<mat-form-field >
<input class="form" ngModel [type]="hide ? 'password' : 'text'" name="Password" matInput placeholder="Password" required>
<mat-icon matSuffix minlength="5" (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Select Role" name="Role" ngModel required>
<mat-option value="master">Master</mat-option>
<mat-option value="driver">Driver</mat-option>
<mat-option value="receptionist">Receptionist</mat-option>
</mat-select>
</mat-form-field>
<button type="submit" class="btn btn-success" [disabled]="!f.valid">Register</button>
</div>
</form>
email = new FormControl('', [Validators.required, Validators.email]);
hide = true;
constructor() { }
ngOnInit() {
}
onSubmit(f) {
console.log(f.value);
f.reset();
console.log(f.get('email'));
}
getErrorMessage() {
return this.email.hasError('required') ? 'You must enter a value' :
this.email.hasError('email') ? 'Not a valid email' :
'';
}