I'm a beginner with Angular and I'm working with reactive Angular forms. In my form, I have two password fields and I want to ensure that only one password is updated at a time. If someone tries to edit both Password1 and Password2 input fields simultaneously, an alert should be triggered saying "Update password one by one."
form.component.html
<form [formGroup]="xyzGroup>
<div class="form-group row">
<label for="password" class="col-sm-3">Password1:</label>
<div class="mx-sm-2 text-center">
<input type="password" class="form-control-sm"
formControlName="WifiPassword" [(ngModel)]="password1" id="inputPassword">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-sm-3">Password2:</label>
<div class="mx-sm-2 text-center">
<input type="password2" class="form-control-sm"
formControlName="WifiPassword2" [(ngModel)]="password2" id="inputPassword">
</div>
</div>
<button (click)=onAlert()>Submit</button>
</form>
form.component.ts
ngOninit(){
this.setFormGroup();
}
setFormGroup() {
this.xyzGroup = this.fb.group({
WifiPassword: "",
WifiPassword2: "" })
}
onAlert(){
if(this.xyzGroup.value.WifiPassword.dirty && this.wlanSettingsGroup.value.WifiPassword2.dirty){
alert("update password once at time")
}
else{
here i am using submit method.......
}
In the code, I'm having issues with the condition inside `if(this.xyzGroup.value.WifiPassword.dirty)`. Can anyone assist me with this problem?