передавая json в текстовое поле за angular - PullRequest
1 голос
/ 19 февраля 2020

Я пытаюсь сделать красивее строку в моей текстовой области в angular, извлеченную из базы данных. Это объект, который я отправляю как строку и сохраняю в своей базе данных. Я представил ang-jsoneditor, но мне нужно проверить его, если, например, в ключе отсутствуют кавычки. Раньше у меня была текстовая область, и проверка была очень простой с использованием validatorFn из angular.

. У меня есть следующее:

в моем html:



<form fxLayout="column" [formGroup]="configForm">
    <div fxFlex="1 0 auto" fxLayout="column">
      <mat-form-field appearance="outline" fxFlex="100">
        <mat-label>JSON File</mat-label>
        <textarea matInput type="text" placeholder="Compose the json file here" formControlName="appConfig"
          rows="15"></textarea>
        <mat-error>
          A valid JSON object is required.
        </mat-error>
      </mat-form-field>
    </div>
  </form>


и это то, что у меня есть в моем .ts

 ngOnInit() {
    this.configForm = this.formBuilder.group({
      appConfig: ["", [Validators.required, this.isValidJSON]]
    });
    this.appManagementService.getDeviceAppConfig(this.deviceId).then(response => {
      this.configErrorMessage = null;
      this.lastUpdate = response.lastUpdate;
      this.configForm.setValue({ appConfig: JSON.parse(response.config) });
    }).catch(() => {
      this.configErrorMessage = "Oops, could not get the registry info.";
    });
  }

  private isValidJSON: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
    if (!control.parent || !control) {
      return null;
    }

    const appConfig = control.parent.get("appConfig").value;
    console.log('appConfig', appConfig)
    try {
      JSON.parse(appConfig.toString());
      return null;
    } catch (error) {
      return { "jsonInvalid": true };
    }
  }

, когда я передаю JSON .parse, то, что появляется в моей текстовой области, - [объектный объект]. Как я могу сделать это исправить ??

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...