[SG-664] Add org name length validation to inputs (#4111)

* Add maxLength validator to org name field

* Disable next button if name has any error

* Only check org name value changes

* Add name length validator to normal create org flow

apps/web/src/app/accounts/trial-initiation/trial-initiation.component.html

@@ -62,7 +62,7 @@
               <button
                 bitButton
                 buttonType="primary"
-                [disabled]="orgInfoFormGroup.get('name').hasError('required')"
+                [disabled]="orgInfoFormGroup.get('name').invalid"
                 cdkStepperNext
               >
                 Next

apps/web/src/app/accounts/trial-initiation/trial-initiation.component.ts

@@ -42,7 +42,7 @@ export class TrialInitiationComponent implements OnInit, OnDestroy {
   @ViewChild("stepper", { static: false }) verticalStepper: VerticalStepperComponent;
 
   orgInfoFormGroup = this.formBuilder.group({
-    name: ["", [Validators.required]],
+    name: ["", { validators: [Validators.required, Validators.maxLength(50)], updateOn: "change" }],
     email: [""],
   });
 
@@ -148,6 +148,12 @@ export class TrialInitiationComponent implements OnInit, OnDestroy {
           this.enforcedPolicyOptions = enforcedPasswordPolicyOptions;
         });
     }
+
+    this.orgInfoFormGroup.controls.name.valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        this.orgInfoFormGroup.controls.name.markAsTouched();
+      });
   }
 
   ngOnDestroy(): void {

apps/web/src/app/settings/organization-plans.component.ts

@@ -121,7 +121,7 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
     }
 
     if (this.createOrganization) {
-      this.formGroup.controls.name.addValidators(Validators.required);
+      this.formGroup.controls.name.addValidators([Validators.required, Validators.maxLength(50)]);
       this.formGroup.controls.billingEmail.addValidators(Validators.required);
     }