export class AddUserComponent implements OnInit {
registrationForm: FormGroup;
formErrors = {};
validationMessages = {};
constructor(private _fb: FormBuilder ) { }
ngOnInit() {
this.setFormErrors();
this.creatForms();
this.getDepartmentDDL();
}
getDepartmentDDL() {
// get list of deparment
this.setFormArray(departmentData)
}
setFormErrors() {
this.formErrors = {
'first_Name': '',
'phone_number': '',
'email': '',
'department': '',
'password': '',
'confirm_password': ''
};
this.validationMessages = {
'first_Name': {
'required': 'First name is required.',
'minlength': 'First name must be at least 4 characters long.',
'maxlength': 'First name cannot be more than 20 characters long.'
},
'phone_number': {
'required': 'Phone number is required.',
'pattern': 'Phone number is invalid.',
'maxlength': 'Phone number cannot be more than 20 number long.'
},
'email': {
'required': 'E-mail is required.',
'email': 'E-mail is invalid.',
'maxlength': 'E-mail cannot be more than 100 characters long.'
},
'password': {
'required': 'Password is required.',
'minlength': 'Password must be at least 4 characters long.',
'maxlength': 'Password cannot be more than 35 characters long.'
},
'confirm_password': {
'required': 'Confirm password is required.',
'invalid': 'Password do not match!'
}
};
}
creatForms() {
this.registrationForm = this._fb.group({
first_Name: [this.user.firstname, [Validators.required,
Validators.minLength(4), Validators.maxLength(20)]],
phone_number: ['', [Validators.required,
Validators.pattern('[0-9\+\-\]+'), Validators.maxLength(20)]],
email: [{ value: this.user.email, disabled: this.isEdit },
[Validators.required, Validators.email, Validators.maxLength(100)]],
password: [this.user.password, this.passwordValidator],
confirm_password: [this.user.password, this.cnfPasswordValidator],
department: this._fb.array([]),
});
this.registrationForm.valueChanges.subscribe(data => this.onFormChanged(data));
}
setFormArray(departmentData) {
const arrayItem = departmentData.map(item => {
const obj = Object.assign({}, item);
obj.selectedArr = '';
return this._fb.group(obj)
});
const roleItems = this._fb.array(arrayItem);
this.registrationForm.setControl(department, roleItems);
}
passwordconfirmation(c: AbstractControl): any {
if (!c.parent || !c) { return; }
const pwd = c.parent.get('password');
const cpwd = c.parent.get('confirm_password')
if (!pwd.value || !cpwd.value) { return; }
if (pwd.value !== cpwd.value) {
return { invalid: true };
}
}
clearConfirmPass() {
this.registrationForm.controls['confirm_password'].setValue(null)
}
onFormChanged(data?: any) {
if (!this.registrationForm) { return; }
const form = this.registrationForm;
// tslint:disable-next-line:forin
for (const field in this.formErrors) {
// clear previous error message (if any)
this.formErrors[field] = '';
const control = form.get(field);
if (control && control.dirty && !control.valid) {
const messages = this.validationMessages[field];
// tslint:disable-next-line:forin
for (const key in control.errors) {
this.formErrors[field] += messages[key] + ' ';
}
}
}
}
onClickSave() {
const newUser = {};
newUser['firstname'] = this.registrationForm.value['first_Name'];
newUser['Phone'] = this.registrationForm.value['phone_number'];
newUser['email'] = this.registrationForm.value['email'];
newUser['department'] = this.getDepartmentArr();
}
getDepartmentArr() {
const selectedDepartmentArr = [];
this.registrationForm.value.department.map(item => {
if (item.selectedArr) {
selectedDepartmentArr.push({ sfdcId: item.id, Name: item.Name,
status: item.selectedArr })
}
})
return selectedDepartmentArr;
}
}
