当页面加载的时候显示角4验证

Question

我正在处理角4的表单，并在输入字段上设置了一些验证，但验证在页面加载时显示，但我希望在提交表单或电子邮件时进行验证模式无效。

<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)" 
[class.error]="!myForm.valid && myForm.touched"> 

    <div class="field" [class.error]="!email.valid && email.touched"> 
    <label for="email">Email</label> 
    <input type="email" id="email" name="email" [formControl]="email"> 
    <div *ngIf="!email.valid" 
    class="ui error message">Email is invalid</div> 
    <div *ngIf="email.hasError('required')" 
    class="ui error message">Email is required</div> 
    </div> 

    <div *ngIf="!myForm.valid" 
    class="ui error message">Form is invalid</div> 
    <button type="submit">login</button> 
</form> 

打字稿代码：

function EmailValidator(control: FormControl): { [s: string]: boolean } { 
if (!control.value.match('^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$')) 
{ 
    return {invalidEmail: true}; 
} 
} 

@Component({ 
selector: 'app-login-form', 
templateUrl: './login-form.component.html', 
styleUrls: ['./login-form.component.css'] 
}) 

export class LoginFormComponent implements OnInit { 

myForm: FormGroup; 
email: AbstractControl; 

constructor(fb:FormBuilder) { 
    this.myForm = fb.group({ 
    'Email': ['', Validators.compose([ 
    Validators.required, EmailValidator]) 
    ] 
}); 

this.email = this.myForm.controls['Email']; 
} 

onSubmit(form: string): void { 
    console.log('you submitted value:', form); 
} 
} 

Answer 1

可以使用

<div 
    *ngIf="myForm.get('email').hasErrors('required') && 
    myForm.get('email').touched"> 

    Email is required 

</div> 

和适应hasError到您的验证