Angular 隐藏字段时对ReactiveForm的块形式验证
我的表单中有一个按钮,在表单生效之前,该按钮处于禁用状态。当我的所有字段都可见时,一切正常。但是,当某个字段被条件(ngIf)隐藏时,验证仍将进行。我只想在该字段可见时控制它 我的HTMLAngular 隐藏字段时对ReactiveForm的块形式验证,angular,angular-reactive-forms,Angular,Angular Reactive Forms,我的表单中有一个按钮,在表单生效之前,该按钮处于禁用状态。当我的所有字段都可见时,一切正常。但是,当某个字段被条件(ngIf)隐藏时,验证仍将进行。我只想在该字段可见时控制它 我的HTML <form [formGroup]="form" (ngSubmit)="onRegister()"> <div class="signup-form"> <mat-radio-group> <mat-radio-button cl
<form [formGroup]="form" (ngSubmit)="onRegister()">
<div class="signup-form">
<mat-radio-group>
<mat-radio-button class="radio" value="candidat" (click)="resetCompany(false)" checked>Candidat
</mat-radio-button>
<br>
<mat-radio-button class="radio" value="company" (click)="resetCompany(true)">Entreprise</mat-radio-button>
</mat-radio-group>
<mat-form-field>
<input matInput placeholder="Nom" formControlName="lastName">
</mat-form-field>
<span *ngIf="lastName.invalid && lastName.touched" class="errorvalidation">
Votre nom est requis.
</span>
<mat-form-field [ngStyle]="{'display':selectedCompany === true ? 'none' : 'inline-block' }">
<input matInput placeholder="Prénom" formControlName="firstName">
</mat-form-field>
<span *ngIf="firstName.invalid && firstName.touched" class="errorvalidation">
Votre prénom est requis.
</span>
<mat-form-field>
<input matInput placeholder="Adresse e-mail" formControlName="email">
</mat-form-field>
<span *ngIf="email.invalid && email.touched" class="errorvalidation">
L'email ne semble pas être au bon format.
</span>
<mat-form-field>
<input matInput type="password" placeholder="Mot de passe" formControlName="password">
</mat-form-field>
<span *ngIf="password.invalid && password.touched" class="errorvalidation">
Le mot de passe est requis.
</span>
<mat-form-field>
<input matInput type="password" placeholder="Confirmez mot de passe" formControlName="confirmPassword">
</mat-form-field>
<div *ngIf="f.confirmPassword.errors" class="errorvalidation">
<div *ngIf="f.confirmPassword.errors.required && confirmPassword.touched">Le champ est requis</div>
<div *ngIf="f.confirmPassword.errors.mustMatch && confirmPassword.touched">Les mots de passes doivent être
identiques</div>
</div>
</div>
<div mat-dialog-actions align="end">
<button mat-raised-button (click)="onNoClick()" color="warn">Annuler</button>
<button class="btn" [disabled]="form.invalid" type="submit" mat-button [mat-dialog-close]>Je
m'inscris</button>
</div>
</form>
当字段“firstName”被隐藏时,我怎么能省略它的验证呢
谢谢你我想你可以在点击单选按钮时动态删除/添加表单控件。这样,除非单击相应的单选按钮,否则不会执行验证 组成部分
ngOnInit(){
this.form=this.formBuilder.group({
电子邮件:['',[Validators.required,Validators.email]],
密码:['',验证程序。必需],
确认密码:['',验证器。必需]
});
本公司(假);
}
重置公司(b){
this.selectedCompany=b;
如果(!b){//选择“候选对象”时添加控件
this.form.addControl('firstName',新FormControl('',Validators.required))
this.form.addControl('lastName',new FormControl('',Validators.required))
}else{//选择“Enterprise”时删除控件
此.form.removeControl('firstName');
this.form.removeControl('lastName');
}
}
模板
我的名字是最需要的。
这是我的要求。
非常欢迎您的示例Stackblitz,如果它对您有帮助,请进行投票并选择它作为答案。
ngOnInit() {
this.form = this.formBuilder.group({
firstName: ['', [Validators.required]],
lastName: ['', [Validators.required]],
email: ['', [Validators.required, Validators.email]],
password: ['', Validators.required],
confirmPassword: ['', Validators.required]
}, {
validator: MustMatch('password', 'confirmPassword')
});
}