在 lwc 中迭代的 textarea 字段添加验证

Question

我正在尝试在 textarea 字段上添加验证。 每次添加记录时，OTP 列都会添加一个新的文本区域字段。 验证仅适用于第一条记录。但是如果我验证第二/第三..记录，验证消息只出现在第一条记录中。 我该如何解决？我希望验证在添加了不正确数据的同一字段上进行。

我也试过使用lightning-input，有一些限制导致无法使用它。 所以必须使用textarea.

HTML

<input type="text" class="slds-textarea otp-txtarea" value={itlist.value.mobile_number}
 minlength="7" maxlength="12" placeholder="Mobile number" onchange={addOtp}
 data-value={it.value.order} data-key={itlist.value.email} data-name={itlist.value.name}>

JS

addOtp(event){
        this.otpNumber = event.target.value;
        let otptxtarea = this.template.querySelector('.otp-txtarea');
        let otptxtarea1 = this.template.querySelector('.otp-txtarea').value;
        let order = event.currentTarget.dataset.value;
        let email = event.currentTarget.dataset.key;
        let name = event.currentTarget.dataset.name;
        if (this.otpNumber.length >= 1 && this.otpNumber.length < 7) {
            otptxtarea.setCustomValidity("Please enter atleast 7 characters.");
            otptxtarea.reportValidity();
        }
        else if (this.otpNumber.length > 12) {
            otptxtarea.setCustomValidity("Maximum of 12 characters allowed.");
            otptxtarea.reportValidity();
        }
        else if (this.otpNumber.length < 1){
            otptxtarea.setCustomValidity("This field is required.");
            otptxtarea.reportValidity();
        }
        if (this.otpNumber != null && this.isOtpEnable == true) {
            if (this.recipientListToView[order - 1].signers.length > 0) {
                for (let i = 0; i < this.recipientListToView.length; i++) {
                    if (this.recipientListToView[i].order == order) {
                        let tempList = this.recipientListToView[i].signers;
                        for (let j = 0; j < this.recipientListToView[i].signers.length; j++) {
                            if (name === tempList[j].name && email === tempList[j].email) {
                                //otptxtarea.reportValidity();
                                tempList[j].mobile_number = parseInt(this.otpNumber);
                                console.log('temp 1 '+ tempList);
                            }
                        }
                        this.recipientListToView[i].signers = tempList;
                        console.log('temp 2 '+JSON.stringify(this.recipientListToView));
                    }
                }
            }
        }
        this.otpColor = true;
    }