Angular Значения параметров маршрута, не связывающиеся с троичным ngClass - PullRequest
Новая
       64

Angular Значения параметров маршрута, не связывающиеся с троичным ngClass

0 голосов
/ 06 марта 2020

Мое возвращаемое значение из моей html троичной, previewForm.value ['joint_application'] * связывает неверный вывод строки в form-page.component. html. Ожидается, что пользователь перейдет обратно с этой страницы предварительного просмотра на домашнюю страницу, чтобы отредактировать это значение в другой форме, которая заполняет URL параметрами, которые затем обрабатываются previewForm

previewForm.value ['joint_application'] получает параметры из URL-адрес анализируется, чтобы определить, является ли параметр истинным или ложным, и затем отображает его соответствующим образом на html.

. Похоже, эта троичная переменная не чередуется соответствующим образом в зависимости от URL-адреса: 

{{ previewForm.value['joint_application'] ? 'Me & My Partner': 'Just Me' }}

Таким образом, если в URL-адресе joint_application = true, я ожидаю «Я и мой партнер», однако я получаю только «Просто я»

Однако, это может отличаться от истинного и ложного соответственно 

{{ previewForm.value['joint_application'] }}

Мой типичный URL-адрес:

http://localhost: 4200 / форма цитаты; joint_application = true

, который передается с моей домашней страницы на эту страницу формы цитаты через этот маршрут:

app.module.ts 

const appRoutes: Routes = [
    { path: 'quote-form', component: FormPageComponent },
]

form-page.component.ts 

export class FormPageComponent implements OnInit {
    public previewForm: FormGroup;

    constructor(
        private fb: FormBuilder,
        private route: ActivatedRoute,
        private router: Router
    ){ }

    ngOnInit() {
        this.previewParamValues()
    }

    previewParamValues() {
        this.route.params.subscribe(params => {
            this.previewForm = this.fb.group({
                joint_application: params.joint_application,
            });
        })
    }

form-page.component. html

<form [formGroup]="previewForm">
    <div class="form-group form-inline">
        <h6 small ><b>Quotes For: &nbsp;</b></h6>
        <h6 small>{{ previewForm.value['joint_application'] ? 'Me & My Partner': 'Just Me' }}</h6>
    </div>
</form>

1 Ответ

2 голосов
/ 06 марта 2020

Вам нужно создать элемент управления формы, а не просто передавать значение при создании группы форм. 

previewParamValues() {
  this.route.params.subscribe(params => {
    this.previewForm = this.fb.group({
      //                 <---- create control here
      joint_application: this.fb.control(params.joint_application),
    });
  })
}

И предупреждающее слово - будьте осторожны, чтобы преобразовать значение вашего параметра в логическое значение. Если ваш параметр выглядит как joint_application=false, я подозреваю, что вы просто получите строковое значение "false", что все еще верно.

Вместо этого вы должны создать свой элемент управления формы, используя логическое значение:

Angular <= 8 </p> 

this.fb.control(!!params.joint_application && 
  params.joint_application.toLowerCase() === 'true')

Angular> = 9 

this.fb.control(params.joint_application?.toLowerCase() === 'true')

EDIT

Оператор "bang bang" !! не строго необходим в версии <= v8, если только вы не заботитесь о сравнении со строгими логическими типами. </p>

Вот довольно тривиальный пример: 

const value = null;

const result1 = value && value === 'true';
const result2 = !!value && value === 'true';

const check1 = result1 === false;
const check2 = result2 === false;

console.log("(value && value === 'true') === false");
console.log(check1);
console.log("(!!value && value === 'true') === false");
console.log(check2);

И если подумать, то эквивалент в версии> = v9 будет 

this.fb.control(params.joint_application?.toLowerCase() === 'true' || false)
...