只有在辅助电话字段中输入值时，才会启用保存按钮，另一个问题是需要验证辅助电话号码，但这不是必填字段。
<div class="row form-group">
<div class="col-xs-12">
<div class="float-label active">
<input type="tel" class="input-underline-blue" id="zip" formControlName="zip"
placeholder="@Html.Sitecore().Field("Zip Label", profileItem)*"
(keydown)="numOnlyDown($event)"
(keyup)="numOnlyUp($event)"
required />
<label for="zip">@Html.Sitecore().Field("Zip Label", profileItem)</label>
<div *ngIf="!editInfoForm.get('zip').valid && editInfoForm.get('zip').touched" class="alert alert-danger alert-small">
<span *ngIf="editInfoForm.get('zip').hasError('required')">
Zip Required
@* @Html.Sitecore().Field("Zip Required", profileItemm) *@
</span>
<span *ngIf="editInfoForm.get('zip').hasError('validateZip') && !editInfoForm.get('zip').hasError('required')">
Enter a valid zip code
</span>
</div>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-xs-12">
<div class="float-label active">
<input type="tel" class="input-underline-blue" id="phone" formControlName="phone"
placeholder="@Html.Sitecore().Field("Phone Label", profileItem)*"
phone
[phoneCountry]="editInfoForm.get('country').value"
(keydown)="numOnlyDown($event)"
(keyup)="numOnlyUp($event)"
[maxlength]="phoneMax"
required />
<label for="phone">@Html.Sitecore().Field("Phone Label", profileItem)</label>
<div *ngIf="!editInfoForm.get('phone').valid && editInfoForm.get('phone').touched" class="alert alert-danger alert-small">
<span *ngIf="editInfoForm.get('phone').hasError('required')">
@Html.Sitecore().Field("Phone Required", profileItem)
</span>
<span *ngIf="!editInfoForm.get('phone').hasError('required') && !editInfoForm.get('phone').valid">
Enter a valid phone number
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="float-label active">
<input type="tel" class="input-underline-blue" id="secondary-phone" formControlName="secondary-phone"
placeholder="@Html.Sitecore().Field("Mobile Phone Label", profileItem)"
phone
[phoneCountry]="editInfoForm.get('country').value"
(keydown)="numOnlyDown($event)"
(keyup)="numOnlyUp($event)"
[maxlength]="phoneMax" />
<label for="secondary-phone">@Html.Sitecore().Field("Mobile Phone Label", profileItem) @Translate.Text("(optional)")</label>
<div *ngIf="!editInfoForm.get('secondary-phone').valid && editInfoForm.get('secondary-phone').touched" class="alert alert-danger alert-small">
Enter a valid phone number
</div>
</div>
</div>
</div>
<div class="row mv3">
<div class="col-xs-12">
</div>
</div>
<div class="row form-buttons">
<div class="col-xs-12">
<button class="btn btn-orange" type="submit" [disabled]="!editInfoForm.valid">@Html.Sitecore().Field("Save Changes Button", profileItem)</button>
<a class="form-link cancel fr fz-sm v-mid" (click)="toggleEditContactInformation()">@Html.Sitecore().Field("Cancel Button", profileItem)</a>
</div>
</div>
</form>
</div>
</div>
<div class="row section-footer" id="contact-info-footer" *ngIf="editContactInformation === null">
<div class="col-xs-12">
<a class="arrow-link" (click)="toggleEditContactInformation();">@Html.Sitecore().Field("Edit Contact Information", profileItem)</a>
</div>
</div>
@Component（{ 选择器：'profile-app'， templateUrl：'/ apps / customer-portal / profile / profile-component'， 提供者：[ProfileService，PasswordValidationService，UserService]， }） export类ProfileComponent实现OnInit {
constructor(private fb: FormBuilder, private userService: UserService, private profileService: ProfileService, private passwordValidationService: PasswordValidationService) {
this.editInfoForm = this.fb.group({
street: ['', Validators.required],
city: ['', Validators.required],
country: '',
state: '',
email: ['', [
Validators.required,
validateEmail
]],
zip: ['', [
Validators.required,
validateZip
]],
phone: ['', [
Validators.required
// validatePhone
]],
'secondary-phone': ['',
validatePhone
]
});
}
toggleEditDetails() {
this.successPassword = false;
this.failPassword = false;
this.successUsername = false;
this.failUsername = false;
if (this.editDetails !== null) {
this.editDetails = null;
return;
}
this.editDetails = new Details();
Object.assign(this.editDetails, this.details);
}
saveEditDetails() {
this.whichButton = "details";
this.save({
userName: this.editDetails.username,
contentLanguage: this.editDetails.language
},
profile => {
this.toggleEditDetails();
});
}
toggleEditCommunicationPreferences() {
if (this.editCommunicationEmail !== null) {
this.editCommunicationEmail = null;
return;
}
this.editCommunicationEmail = this.communicationPreferences.email;
}
toggleEditContactInformation() {
this.successContactInfo = false;
this.failContactInfo = false;
if (this.editContactInformation !== null) {
this.editContactInformation = null;
return;
}
this.editContactInformation = new ContactInformation();
Object.assign(this.editContactInformation, this.contactInformation);
}
saveEditContactInformation(data: any) {
this.whichButton = "contactinfo";
this.save({
// firstName: data.firstName,
// lastName: data.lastName,
// title: data.title,
mailingStreet: data.street,
mailingCity: data.city,
mailingState: data.state,
mailingPostalCode: data.zip,
mailingCountry: data.country,
phone: data.phone,
mobilePhone: data['secondary-phone'],
email: data.email
}, profile => {
this.toggleEditContactInformation();
});
}
private save(profile: IProfile, success: (profile: IProfile) => any) {
if (this.saving)
return;
this.saving = true;
this.profileService.save(profile)
.then(profile => {
this.mapProfile(profile);
success(profile);
this.saving = false;
if (this.whichButton === "details") this.successUsername = true;
if (this.whichButton === "contactinfo") this.successContactInfo = true;
}).catch(() => {
this.saving = false;
if (this.whichButton === "details") this.failUsername = true;
if (this.whichButton === "contactinfo") this.failContactInfo = true;
});
}
ngOnInit() {
this.busy = this.profileService.get()
.then(profile => {
this.mapProfile(profile);
this.editInfoForm.setValue({
street: profile.mailingStreet,
city: profile.mailingCity,
country: profile.mailingCountry,
state: profile.mailingState,
email: profile.email,
zip: profile.mailingPostalCode,
phone: profile.phone,
'secondary-phone': profile.mobilePhone
});
});
}
formChanged() {
this.editInfoForm.valueChanges
.subscribe(data => this.onValueChanged(data));
}
onValueChanged(data?: any) {
if(this.editInfoForm.get('country').value === 'UNITED STATES') {
this.phoneMax = 12;
this.editInfoForm.controls['phone'].setValidators([Validators.required, Validators.minLength(12), Validators.maxLength(12)]); // Length 10 digits + 2 '-'
} else {
this.phoneMax = null;
this.editInfoForm.controls['phone'].setValidators([Validators.required]);
}
var sSecPhone = '';
sSecPhone = this.editInfoForm.get('secondary-phone').value;
if (this.editInfoForm.get('country').value === 'UNITED STATES') {
this.phoneMax = 12;
this.editInfoForm.controls['secondary-phone'].setValidators([Validators.required, Validators.minLength(12), Validators.maxLength(12)]); // Length 10 digits + 2 '-'
} else {
this.phoneMax = null;
this.editInfoForm.controls['secondary-phone'].setValidators([Validators.minLength(6), Validators.maxLength(20)]);
}
}
ngAfterViewChecked() {
this.formChanged();
}
}
感谢 Karthey