更改HTML的值不会正确地更改该值吗？

Question

当我改变一个元素的值时，里面的html改变了，但是它不被识别，因为它仍然显示field是必需的。我尝试将elements required属性更改为false，但也没有任何帮助。Image

let element = document.getElementById('mat-input-2')

element.focus()
element.value = "test@gmail.com"
element.required = false;
element.blur();

<input _ngcontent-sde-c17="" class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored ng-pristine ng-invalid ng-touched" data-test="email" formcontrolname="email" matinput="" placeholder="Email" type="email" id="mat-input-2" aria-invalid="true" aria-required="true" required="" aria-describedby="mat-error-3">

Answer 1

required是一个布尔属性。如果它存在于HTML element中，那么它包含任何值都无关紧要，甚至false值也是如此，那么它就被视为true值。因此，您必须完全删除attribute。您可以使用removeAttribute或toggleAttribute。

您可以看到所有三个setAttribute、removeAttribute和toggleAttribute的示例

​

const element = document.querySelector("input")
const btnSetAttribute = document.querySelector('#btnSetAttribute');
const btnRemoveAttribute = document.querySelector('#btnRemoveAttribute');
const btnToggleAttribute = document.querySelector('#btnToggleAttribute');

btnSetAttribute.addEventListener('click', e => {
    if( !element.disabled ){
        element.setAttribute('disabled', true);
    } else {
        element.setAttribute('disabled', false);
    }
})

btnRemoveAttribute.addEventListener('click', e => {
    if( !element.disabled ){
        element.setAttribute('disabled', true);
    } else {
        element.removeAttribute('disabled');
    }
})

btnToggleAttribute.addEventListener('click', e => {
    element.toggleAttribute('disabled');
})

<input type="text" placeholder="click button to disable"/>
<br />
<button id="btnSetAttribute"> disable using setAttribute </button>
<button id="btnRemoveAttribute"> disable using removeAttribute </button>
<button id="btnToggleAttribute"> disable using toggleAttribute </button>

​

您应该使用removeAttribute或toggleAttribute。

​

const input = document.querySelector('input');

let element = document.getElementById('mat-input-2')

element.focus()
element.value = "test@gmail.com"
element.toggleAttribute('required');
element.toggleAttribute('aria-required');
element.blur();

<input _ngcontent-sde-c17="" class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored ng-pristine ng-invalid ng-touched" data-test="email" formcontrolname="email" matinput="" placeholder="Email" type="email" id="mat-input-2" aria-invalid="true" aria-required="true" required="" aria-describedby="mat-error-3">

​

Answer 2

要删除的：

element.removeAttribute('required');
element.setAttribute('aria-required', 'false');

要添加的：

element.setAttribute('required', '');
element.setAttribute('aria-required', 'true');

如果您在必填字段中重复切换true/false，最好为该操作创建一个函数。

这里就是一个例子：

<input id="inputElem" type="text" aria-required="true" required>

const inputElem = document.querySelector('#inputElem');

function toggleInputRequired(element, status = true) {
  if (status) {
    element.setAttribute('required', '');
    element.setAttribute('aria-required', 'true');
  } else {
    element.removeAttribute('required');
    element.setAttribute('aria-required', 'false');
  }
}

toggleInputRequired(inputElem, false); // Remove required
toggleInputRequired(inputElem); // Add required