Блог

Главная - Вопросы по программированию - Динамически заданный ввод по-прежнему делает форму недопустимой

Динамически заданный ввод по-прежнему делает форму недопустимой

#javascript #angular

#javascript #угловой

Вопрос:

У меня есть три поля ввода, которые все обязательны. 1-е поле ввода — это количество, которое вводится вручную, второе вычисляется на основе метода (ввода) 1-го ввода (количество / итог), а 3-е поле ввода — это сумма, которая задается динамически (из базы данных). Динамическая настройка этих входных данных работает нормально.Но после автоматической настройки вычисленных и итоговых значений форма по-прежнему недействительна, как я могу сделать форму действительной, потому что в обоих полях уже есть значения, которые были установлены динамически.

form.component.html

 <mat-form-field class="w-10-p" appearance="outline">
     <input  matInput 
         formControlName="quantity" 
         type="number"
         (input)="computeValues(i, $event)"
         required>
</mat-form-field>

<mat-form-field class="w-10-p" appearance="outline">
     <input  matInput 
          formControlName="computed" 
          [id]="'computed'"
          type="number"
          required> 
</mat-form-field>

<mat-form-field class="w-10-p" appearance="outline">
      <input  matInput 
            formControlName="total" 
            [id]="'total'"
            type="number"
            required> 
</mat-form-field>

form.component.ts

 computeValues(index,event){ //iluvJS
        var quantity=event.target.value;
        let total = (document.getElementById('total') as HTMLInputElement).value;
        var size = Math.round((parseFloat(total) / quantity) * 100) /100;
        (document.getElementById('size') as HTMLInputElement).value=size.toString();

    }

Форма по-прежнему действует так, как будто эти входные данные по-прежнему пусты.

Комментарии:

1. Не используйте document.getElementById('size') as HTMLInputElement).value для установки значений, используйте вместо этого элементы управления формой

2. Вы устанавливаете значение в html, но вы не устанавливаете его в форме. Используйте form.get([ путь к элементу управления ]). patchValue (значение), то есть form.get([‘total’]). Значение исправления (30)

3. @xyz Спасибо вам за это, сэр. Я новичок в angular, и я действительно не понимаю всей концепции элементов управления формой или что именно вы имеете в виду. Не могли бы вы дать мне какую-либо ссылку, которая помогла бы мне понять это? Извините, если вы находите запрос глупым.

4. @code4funN4treasure Docs от angular.io было бы вашим лучшим руководством. Чтобы ответить на ваш вопрос, Келлсон уже ответил на него в своем комментарии.

5. @code4funN4treasure почему вы не используете form.patchValue ?

Ответ №1:

Вы должны сделать это следующим образом (используйте patchValue, если вам нужно обновить некоторые элементы управления, и используйте setValue, если вы хотите изменить все элементы управления)

 this.yourForm.patchValue({
  total: 50,
  size: '123'
})

Ответ №2:

Ваш функциональный код должен быть таким.

 this.computeValues(index,event){ //iluvJS
    var quantity= this.formname.controls.quantity.value;
    let total = this.formname.controls.total.value;
    var size = Math.round((parseFloat(total) / quantity) * 100) /100;
    (document.getElementById('size') as HTMLInputElement).value=size.toString();
    this.formname.controls.size.setValue(size);

}