fix: fix bug where required fields were not being enforced (#8455)

packages/amplify-ui-components/src/components/amplify-form-field/amplify-form-field.tsx

@@ -63,6 +63,7 @@ export class AmplifyFormField {
 							value={this.value}
 							inputProps={this.inputProps}
 							disabled={this.disabled}
+							required={this.required}
 						/>
 					</slot>
 				</div>

packages/amplify-ui-components/src/components/amplify-input/amplify-input.spec.ts

@@ -60,5 +60,9 @@ describe('amplify-input spec:', () => {
 		it('should have `type` set to `text` by default', () => {
 			expect(input.type).toEqual('text');
 		});
+
+		it('should have `required` set to `false` by default', () => {
+			expect(input.required).toBe(false);
+		});
 	});
 });

packages/amplify-ui-components/src/components/amplify-input/amplify-input.tsx

@@ -25,6 +25,8 @@ export class AmplifyInput {
 	@Prop() inputProps?: object;
 	/** Will disable the input if set to true */
 	@Prop() disabled?: boolean;
+	/** Whether the input is a required field */
+	@Prop() required?: boolean = false;
 	/** Whether the input has been autocompleted */
 	@State() autoCompleted = false;
 	private removeHubListener: () => void;
@@ -132,6 +134,7 @@ export class AmplifyInput {
 					class="input"
 					value={this.value}
 					disabled={this.disabled}
+					required={this.required}
 					{...this.inputProps}
 				/>
 			</Host>

packages/amplify-ui-components/src/components/amplify-phone-field/amplify-phone-field.tsx

@@ -32,11 +32,7 @@ export class AmplifyPhoneField {
 	render() {
 		return (
 			<div>
-				<amplify-form-field
-					label={I18n.get(this.label)}
-					hint={this.hint}
-					required={this.required}
-				>
+				<amplify-form-field label={I18n.get(this.label)} hint={this.hint}>
 					<div class="phone-field" slot="input">
 						<amplify-country-dial-code
 							dialCode={this.dialCode}
@@ -51,6 +47,7 @@ export class AmplifyPhoneField {
 							value={this.value}
 							inputProps={this.inputProps}
 							disabled={this.disabled}
+							required={this.required}
 						/>
 					</div>
 				</amplify-form-field>