diff --git a/src/material-experimental/mdc-chips/chip-input.spec.ts b/src/material-experimental/mdc-chips/chip-input.spec.ts index 2388927b48ee..36dcc19d1894 100644 --- a/src/material-experimental/mdc-chips/chip-input.spec.ts +++ b/src/material-experimental/mdc-chips/chip-input.spec.ts @@ -94,6 +94,15 @@ describe('MDC-based MatChipInput', () => { expect(inputNativeElement.getAttribute('aria-required')).toBe('true'); }); + it('should be required if the list is required', () => { + expect(inputNativeElement.hasAttribute('required')).toBe(false); + + fixture.componentInstance.required = true; + fixture.detectChanges(); + + expect(inputNativeElement.getAttribute('required')).toBe('true'); + }); + it('should allow focus to escape when tabbing forwards', fakeAsync(() => { const gridElement: HTMLElement = fixture.nativeElement.querySelector('mat-chip-grid'); diff --git a/src/material-experimental/mdc-chips/chip-input.ts b/src/material-experimental/mdc-chips/chip-input.ts index a05a970fc5eb..3bab6af349f8 100644 --- a/src/material-experimental/mdc-chips/chip-input.ts +++ b/src/material-experimental/mdc-chips/chip-input.ts @@ -69,6 +69,7 @@ let nextUniqueId = 0; '[attr.placeholder]': 'placeholder || null', '[attr.aria-invalid]': '_chipGrid && _chipGrid.ngControl ? _chipGrid.ngControl.invalid : null', '[attr.aria-required]': '_chipGrid && _chipGrid.required || null', + '[attr.required]': '_chipGrid && _chipGrid.required || null', } }) export class MatChipInput implements MatChipTextControl, AfterContentInit, OnChanges, OnDestroy {