如何在angular中使用*ngIf和conditional required ?

Question

<div class="p-field-checkbox">
<p-checkbox formControlName="passwordUpdate" binary="false" name="passwordUpdate" inputId="passwordUpdate"></p-checkbox>
<label for="passwordUpdate">Update Password</label>
</div>
<div class="input-group" *ngIf="form.get('passwordUpdate').value">
<label class="required" for="password">Password</label>
<input formControlName="password" type="password" name="password" placeholder="Password" id="password" class="input input-m" [required]="form.get('passwordUpdate').value">
</div>

如果条件为'true'，则出现密码字段。当提交按钮被点击时，密码字段被验证为必需的。

则条件变为'false'，但所需的验证没有被删除，因此表单无法提交。请帮我整理一下。提前谢谢。

Answer 1

当您在使用ReactiveForms时，我们可以根据"passwordUpdate"的状态添加和删除验证

<form [formGroup]="contactForm">
<div>
<label>Update Password</label>
<input type="checkbox" formControlName="resetPassword" (change)="onCheckboxChange()" />
</div>
<div *ngIf="contactForm.get('resetPassword')?.value">
<label for="last-name">Password: </label>
<input type="text" formControlName="password">
Required: {{ contactForm.get('password')?.hasError('required') }}
</div>
<div>
<button type="submit">Submit</button>
Valid Form : {{ contactForm.valid }}
</div>
</form>

我添加了"change"函数，该函数触发.ts文件中的一个函数，该函数重置密码验证。字段。

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
contactForm!: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.createContactForm();
}
createContactForm() {
this.contactForm = this.formBuilder.group({
resetPassword: [],
password: [],
});
}
onCheckboxChange(): void {
if (this.contactForm.controls['resetPassword'].value) {
this.contactForm.get('password')?.setValidators([Validators.required]);
this.contactForm.get('password')?.updateValueAndValidity();
} else {
this.contactForm.controls['password'].clearValidators();
this.contactForm.get('password')?.updateValueAndValidity();
}
}
}

我在stackblitz上创建了一个相同的模拟项目。

Answer 2

当'password Update'为false时，可以禁用FormControl 'password'，这样它就不会参与表单的验证

你可以在ngOnInit()

中添加以下代码

this.form.get('passwordUpdate').valuechange()
.subscrip(res => {
if(res===true){
this.form.get('password').enable();
} else{
this.form.get('password').disable();
}
});