Для проверки angular формы и Json (базовая c проверка уже выполнена) - PullRequest
Новая
       37

Для проверки angular формы и Json (базовая c проверка уже выполнена)

1 голос
/ 20 марта 2020

Когда мы наводим курсор на первый столбец таблицы, появляется всплывающая подсказка, а затем при щелчке по нажатию кнопки в диалоговом окне циновки всплывающей подсказки открывается. , Слева, какая строка выбрана, соответствующие ей данные показаны справа json.

1) Проверка формы Basi c работает, но мне нужно показать какое-то сообщение (если форма недействительна) ) если пользователь редактирует json и пытается нажать на кнопку. (пробовал использовать свойство onUpdate blur [ngModelOption] [ngFormOption] onUpdate, но не смог его достичь)

Для json части, в том числе, работает базовая c проверка, но для следующих пунктов, как проверка может быть предоставлена:

1) Не получается, если я сделаю ключ пустой строкой.

2) Как сделать обязательный ключ обязательным.

Stackblitz link https://stackblitz.com/edit/angular-mat-tooltip-qxxgcp?file=app%2Falert-dialog%2Falert-dialog.component.html

Выдержка из alert-dialog.component.ts 

<form #jsonform="ngForm" (ngSubmit)="onAddNewAlert()">
            <json-input [(ngModel)]="data.data[incomingSelectedAlert].conditionals" name="result"></json-input>
            <button type="submit" class="btn btn-success alertButtonSubmit" [disabled]="jsonform.invalid">Add As New Alert</button>
</form>

json -input.component (у меня есть NG_VALIDATORS и функция valdidate, выполняющая основание c json проверка) 

@Component({
selector: 'json-input',
template:
    `
    <style>
     textarea {
     height: 421px;
     width: 480px;
     resize: none;
    }
    </style>
    <textarea
      [value]="jsonString" 
      (change)="onChange($event)" 
      (keyup)="onChange($event)">
    </textarea>
    `,
providers: [
{
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => JsonInputComponent),
  multi: true,
},
{
  provide: NG_VALIDATORS,
  useExisting: forwardRef(() => JsonInputComponent),
  multi: true,
}]       
})
export class JsonInputComponent implements ControlValueAccessor, Validator {
private jsonString: string;
private parseError: boolean;
private data: any;

// this is the initial value set to the component
public writeValue(obj: any) {
    if (obj) {
        this.data = obj;
        // this will format it with 4 character spacing
        this.jsonString = JSON.stringify(this.data, undefined, 4); 
    }
}

// registers 'fn' that will be fired wheb changes are made
// this is how we emit the changes back to the form
public registerOnChange(fn: any) {
    this.propagateChange = fn;
}

// validates the form, returns null when valid else the validation object
// in this case we're checking if the json parsing has passed or failed from the onChange method
public validate(c: FormControl) {
    return (!this.parseError) ? null : {
        jsonParseError: {
            valid: false,
        },
    };
}

// not used, used for touch input
public registerOnTouched() { }

// change events from the textarea
private onChange(event) {

    // get value from text area
    let newValue = event.target.value;

    try {
        // parse it to json
        this.data = JSON.parse(newValue);
        this.parseError = false;
    } catch (ex) {
        // set parse error if it fails
        this.parseError = true;
    }

    // update the form
    this.propagateChange(this.data);
}

// the method set in registerOnChange to emit changes back to the form
private propagateChange = (_: any) => { };
}

Ответы [ 2 ]

1 голос
/ 23 марта 2020

Я выполнил следующие шаги и обновил ваш код в соответствии с требованиями, и он, кажется, работает нормально:

Для добавления проверок для проверки пустой строки и обязательных ключей во вложенных объектах я добавил логи c в методе ngOnInit () при изменении значения формы в AlertDialogComponent с помощью средства доступа к управляющему значению.

Добавлены эти переменные для проверки формы и получения ключей JSON Object, 

isFormValid = true;
mandatoryField = ['conditionals', 'offset', 'alert', 'mTitle'];
allMandatoryFieldsExists: boolean;

Прикрепление моего решения и основного кода здесь, Stackblitz 

this.jsonform.statusChanges.subscribe(() => {
        let data = this.jsonform.value.result;
        let keys = [];
        if(data) {            
          for(var i in data) {
            keys.push(i);
            if(i === 'offset' && data[i] === '') {
              this.isFormValid = false;
              return;
            } else {
              this.isFormValid = true;
            }

            if(i === 'conditionals') {
              for(var j in data[i][0]) {
                keys.push(j);
                if(data[i][0][j] === '') {
                  this.isFormValid = false;
                  return;
                } else {
                  this.isFormValid = true;
                }
              }
            }

            if(i === 'alert') {
              for(var j in data[i]) {
                keys.push(j);
                if(data[i][j] === '') {
                  this.isFormValid = false;
                  return;
                } else {
                  this.isFormValid = true;
                }
              }
            }
          }

          this.allMandatoryFieldsExists = this.mandatoryField.every(x => keys.indexOf(x) >= 0);
        }

        if(this.jsonform.dirty && (!this.isFormValid || !this.allMandatoryFieldsExists)){
            console.log("form is dirty and not valid")
            // this.alertService.error("Json not correct. Please fix!");
        }else{
            console.log("form is dirty but valid")
        }
      });
1 голос
/ 22 марта 2020

Я сделал то, что вам нужно, выполнив следующие шаги:

  • Преобразование формы json в реактивные формы вместо шаблонных форм (не рекомендуется использовать шаблонные формы и извлекать * Директива 1004 * в коде TypeScript)

  • Добавить forbiddenFields (содержит пустую строку, поскольку это действительный действительный ключ в JS) и mandatoryFields к JsonInputComponent

    mandatoryFields: string[] = ["conditionals", "offset", "alert"];
forbiddenFields: string[] = [""];

  • Реализация проверки полей в функции onChange: 

    private onChange(event) {
    // get value from text area
    let newValue = event.target.value;

    try {
        // parse it to json

        this.data = JSON.parse(newValue);
        const datakeys = Object.keys(this.data);

        const containsForbiddenFields = datakeys.some(x => this.forbiddenFields.indexOf(x) >= 0);
        const containsMandatoryFields = this.mandatoryFields.every(x => datakeys.indexOf(x) >= 0);
        this.parseError = containsForbiddenFields || !containsMandatoryFields;
    } catch (ex) {
        // set parse error if it fails
        this.parseError = true;
    }

    // update the form
    this.propagateChange(this.data);
}

Для полного рабочего решения вот раздвоенный Stackblitz

...