cancelCallback works and change creating inputs

form_OOP/main.js

@@ -1,5 +1,6 @@
 function Form(el, data, okCallback, cancelCallback){
     let formBody = document.createElement('div')
+    let inputBox = document.createElement('div')
     let okButton = document.createElement('button')
     okButton.innerHTML = 'OK'
 
@@ -10,17 +11,17 @@ function Form(el, data, okCallback, cancelCallback){
     okButton.disabled = true;
 
     formBody.innerHTML = '<h1>тут будет форма после перервы</h1>'
-    
+    formBody.appendChild(inputBox);
     let inputCreators = {
         String(key, value, oninput){
-            let label = document.createElement('label');
+            /* let label = document.createElement('label'); */
             let input = document.createElement('input');
             if(value == '*'){
                 input.type = 'password'
             } else {
                 input.type = 'text'
             }
-            if(key[0]=='*'){
+            /* if(key[0]=='*'){
             input.onblur = function(){
                 if(input.value.includes('')){
                     input.style.borderColor = 'red';
@@ -29,15 +30,15 @@ function Form(el, data, okCallback, cancelCallback){
             input.onfocus = function(){
                 input.style.borderColor = '';
              }
-            }
+            } */
 
 
-            label.innerText = `${key}`
+            /* label.innerText = `${key}` */
             input.placeholder = key
             input.value       = value
             input.oninput     = () => oninput(input.value)
-            label.appendChild(input);
-            return label
+           /*  label.appendChild(input); */
+            return input
         },
         Boolean(key, value, oninput){
             //label for с input type='checkbox' внутри
@@ -67,9 +68,13 @@ function Form(el, data, okCallback, cancelCallback){
 
    
    
-    for (let [key,value] of Object.entries(data)){
+ let creatingInputs = (data)=>{   
+    inputBox.innerHTML = '';
+     for (let [key,value] of Object.entries(data)){
         console.log(key+":"+data[key]);
         let errorArr = [];
+        let label = document.createElement('label');
+        label.innerText=`${key}`;
         let inputCreations = inputCreators[value.constructor.name];
         let createdInput = inputCreations(key,value,(value)=>{
             if(typeof this.validators[key] === "function"){
@@ -91,17 +96,27 @@ function Form(el, data, okCallback, cancelCallback){
              }
                
         }
+        data[key]=value;
         })
         if(key[0]== '*'){
-             createdInput.classList.add('required');
+             label.classList.add('required');
+             createdInput.onblur = function(){
+                if(createdInput.value.includes('')){
+                    createdInput.style.borderColor = 'red';
+                }
+            }
+            createdInput.onfocus = function(){
+                createdInput.style.borderColor = '';
+             }
         }
-        formBody.appendChild(createdInput);
+        label.appendChild(createdInput);
+        inputBox.appendChild(label);
         inputCreations.oninput = () => {data[input.placeholder] = input.value;
     }
         
     }
-    
-    
+}
+    creatingInputs(data);
 
     if (typeof okCallback === 'function'){
         formBody.appendChild(okButton);
@@ -124,7 +139,9 @@ function Form(el, data, okCallback, cancelCallback){
                     console.log(inputs.value);
                 }
             } */
-            this.cancelCallback(firstInfo);
+            this.data = {...firstInfo};
+            creatingInputs(this.data,this.okCallback,this.cancelCallback);
+            cancelCallback();
         }
     }