양식에 조건을 추가하려고합니다. 기본적으로 확인란이 선택되어있는 경우에만 일부 필드를 필수로 설정하고 싶습니다. 다음은 내 코드입니다.
onCreateContactDetailsForm() {
this.contactDetailsForm = new FormGroup({
firstName: new FormControl(null, [Validators.required, Validators.pattern('^[a-zA-Z\- ]*$')]),
mobileNumber: new FormControl(null, [Validators.required, Validators.pattern('^([0|\+[0-9]{1,5})?([1-9][0-9]{8}|[1-9][0-9]{9})$')]),
surname: new FormControl(null, [Validators.required, Validators.pattern('^[a-zA-Z\- ]*$')]),
workEmail: new FormControl(null, [Validators.email]),
identityValue: new FormControl('', [Validators.required]),
personalEmail: new FormControl(null, [Validators.email]),
exitDate: new FormControl('', [Validators.required]),
exitNoticeDate: new FormControl('', [Validators.required]),
amount: new FormControl('', [Validators.pattern('^$|^[0-9]*$')]),
dateOfBirth: new FormControl('', [Validators.required]),
indebtedToEmployer: new FormControl(false),
isHrEmailAddress: new FormControl(false),
if(isHrEmailAddress) {
address1: new FormControl(null, [Validators.required, Validators.pattern('^[a-zA-Z\- ]*$')]),
address2: new FormControl(null, [Validators.required, Validators.pattern('^[a-zA-Z\- ]*$')]),
address3: new FormControl(null, [Validators.required, Validators.pattern('^[a-zA-Z\- ]*$')]),
postalCode: new FormControl(null, [Validators.required, Validators.pattern('^[a-zA-Z\- ]*$')]),
postalCountry: new FormControl(null, [Validators.required, Validators.pattern('^[a-zA-Z\- ]*$')]),
}
});
}
내 편집기 에서이 오류를 제공하므로 if 문을 여기에 넣을 수 없습니다. Type '(isHrEmailAddress: any) => void' is missing the following properties from type 'AbstractControl': validator, asyncValidator, _parent, _asyncValidationSubscription, and 44 more.
이 작업을 수행하는 더 쉬운 방법이 있습니까?
Angular FormGroup API에는 addControl 메서드가 있으며이를 사용하여 FormControl을 동적으로 추가 할 수 있습니다.
isHrEmailAddress 컨트롤 valueChanges 메서드를 사용하여 isHrEmailAddress 확인란이 선택되었는지 여부를 수신합니다.
component.ts
constructor() {
this.onCreateContactDetailsForm();
this.addControls(this.isHrEmailAddressControl.value);
this.isHrEmailAddressControl.valueChanges.subscribe(isHrEmailAddress => {
this.addControls(isHrEmailAddress);
});
}
addControls(isHrEmailAddress) {
const controls = {
address1: new FormControl(null, [
Validators.required,
Validators.pattern("^[a-zA-Z- ]*$")
]),
address2: new FormControl(null, [
Validators.required,
Validators.pattern("^[a-zA-Z- ]*$")
]),
address3: new FormControl(null, [
Validators.required,
Validators.pattern("^[a-zA-Z- ]*$")
]),
postalCode: new FormControl(null, [
Validators.required,
Validators.pattern("^[a-zA-Z- ]*$")
]),
postalCountry: new FormControl(null, [
Validators.required,
Validators.pattern("^[a-zA-Z- ]*$")
])
};
if (isHrEmailAddress) {
Object.keys(controls).forEach(key => {
this.contactDetailsForm.addControl(key, controls[key]);
});
} else {
Object.keys(controls).forEach(key => {
this.contactDetailsForm.removeControl(key);
});
}
}
component.html
<form [formGroup]="contactDetailsForm">
<input type="text" formControlName="firstName">
<hr>
<input type="checkbox" formControlName="isHrEmailAddress">
<hr>
<div *ngIf="isHrEmailAddressControl.value">
<input type="text" formControlName="address1">
</div>
</form>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다