style: addaptive, readme, fix document validator

Author: kamenko-gena

README.md

@@ -1 +1,17 @@
-**Angular Forms Test
+# Angular Forms Test
+
+### Стек
+- Angular 18
+- TaigaUI 3
+- Maskito
+- NX CLI
+
+### Блок 1 (Данные клиента)
+### Блок 2 (Адрес регистрации)
+### Блок 3 (Банковские реквизиты)
+### Блок 4 (Информация о транзакции)
+### Блок 5 (Дополнительные документы )
+
+
+
+

src/app/components/client-info-form/client-info-form.component.ts

@@ -28,7 +28,7 @@ import { phoneNumberValidator } from 'src/app/validators/phone-number.validator'
 import { passportValidator } from 'src/app/validators/passport.validator';
 
 const CURRENT_DATE = new Date();
-const GENDERS = ['Мужщина', 'Женщина'];
+const GENDERS = ['Мужчина', 'Женщина'];
 const PASSPORT_FILLER = 'XXXX XXXXXX';
 type GendersType = typeof GENDERS;
 type Gender = GendersType[number];

src/app/components/document-info-form/document-info-form.component.html

@@ -1,5 +1,6 @@
 @if(documentFormArray.length) { @for(formGroup of documentFormArray.controls;
 let i = $index; track formGroup ) {
+
 <form class="formGroup" [formGroup]="documentFormArray.controls[i]">
     <div tuiGroup class="item-container">
         <div>
@@ -32,6 +33,7 @@
             ></tui-error>
         </div>
         <button
+            class="removeIconButton"
             appearance="icon"
             icon="tuiIconClose"
             tuiIconButton
@@ -45,6 +47,7 @@
     [error]="[] | tuiFieldError | async"
 ></tui-error>
 } }
+
 <button
     appearance="icon"
     class="addButton"

src/app/components/document-info-form/document-info-form.component.less

@@ -12,4 +12,15 @@
     justify-content: center;
     margin: 1em 0;
     gap: 1em;
+}
+
+@media (max-width: 1040px) {
+    .item-container {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5em;
+    }
+    .removeIconButton {
+        margin: 0 auto;
+    }
 }

src/app/validators/document.validator.ts

@@ -8,7 +8,7 @@ export function documentValidator(): ValidatorFn {
 
         const document = control.value.document;
         const documentNumber = control.value.documentNumber;
-        return documentNumber.length === document.length
+        return documentNumber.length !== document.length
             ? { invalidDocument: true }
             : null;
     };