javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(angular): apply touch, dirty and pristine form control classes (#24558)

Browse Source 
Resolves #24483
This commit is contained in:
Sean Perkins
2022-01-12 14:48:01 -05:00
committed by GitHub
parent 9a15753fd9
commit 273ae2cc08
4 changed files with 18 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
angular/src/directives/control-value-accessors/value-accessor.ts
View File

@ -96,7 +96,7 @@ export class ValueAccessor implements ControlValueAccessor, AfterViewInit, OnDes
if (formControl) {
const methodsToPatch = ['markAsTouched', 'markAllAsTouched', 'markAsUntouched', 'markAsDirty', 'markAsPristine'];
methodsToPatch.forEach((method) => {
if (formControl.get(method)) {
if (typeof formControl[method] !== 'undefined') {
const oldFn = formControl[method].bind(formControl);
formControl[method] = (...params: any[]) => {
oldFn(...params);

10
angular/test/test-app/e2e/src/form.spec.ts
View File

@ -8,6 +8,16 @@ describe('Form', () => {
cy.get('#input-touched').click();
cy.get('#touched-input-test').should('have.class', 'ion-touched');
});
describe('markAllAsTouched', () => {
it('should apply .ion-touched to nearest ion-item', () => {
cy.get('#mark-all-touched-button').click();
cy.get('form ion-item').each(item => {
cy.wrap(item).should('have.class', 'ion-touched');
});
});
});
});
describe('change', () => {

4
angular/test/test-app/src/app/form/form.component.html
View File

@ -12,7 +12,8 @@
<ion-item>
<ion-label>DateTime</ion-label>
<ion-datetime formControlName="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY"></ion-datetime>
<ion-datetime formControlName="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY">
</ion-datetime>
</ion-item>
<ion-item>
@ -65,6 +66,7 @@
<p>
Form Submit: <span id="submit">{{submitted}}</span>
</p>
<ion-button id="mark-all-touched-button" (click)="markAllAsTouched()">Mark all as touched</ion-button>
<ion-button id="submit-button" type="submit" [disabled]="!profileForm.valid">Submit</ion-button>
</form>

4
angular/test/test-app/src/app/form/form.component.ts
View File

@ -46,4 +46,8 @@ export class FormComponent {
});
}
markAllAsTouched() {
this.profileForm.markAllAsTouched();
}
}