I am currently working on an Angular page which consists of input fields where I capture and store values in variables within the .ts file. The entered values are subject to change, so hard-coding them is not feasible.
The variables that I use for storing these values are associated with [(ngModel)] for effective data binding. Everything works smoothly as the values get stored properly.
input1_1: string;
input1_2: string;
input2_1: string;
input2_2: string;
To streamline the comparison process, I group the inputs ending with _1 into the fromArray, while those ending with _2 go into the toArray.
My goal is to ensure that no value from fromArray exists in toArray. To achieve this, I attempted the following logic:
if (this.toArray.includes(this.input1_1) == true) {
//disable the next button
}
However, this approach did not yield the desired result. It appears that I need to access actual values instead of references for accurate comparison.
How can I efficiently compare whether the array of variables holds the same value as a different variable?
Here's all the code consolidated together (extracted for illustrative purposes), which should provide more clarity.
// Input values from Angular HTML input fields
input1_1: string;
input1_2: string;
input2_1: string;
input2_2: string;
input3_1: string;
input3_2: string;
input4_1: string;
input4_2: string;
// Arrays for comparison
fromArray = [this.input1_1, this.input2_1, this.input3_1, this.input4_1];
toArray = [this.input1_2, this.input2_2, this.input3_2, this.input4_2];
// Function to execute for each input field
checkValues() {
if (this.toArray.includes(this.input1_1) == true) {
this.disableNext = true
} else (this.disableNext = false)
}
In lieu of extensive comparisons between values, I opted for a concise approach. Despite scouring for similar examples for the past two hours, none proved helpful. While I did come across array.some(), I deemed array.includes() as a preferable option over it.
Any suggestions or guidance would be highly appreciated, especially since I'm relatively new to coding—feel free to seek clarification if needed.
EDIT: In response to requests from Jo Carrasco and Dev, I will include the complete setup:
Despite inaccuracies in html formatting on StackBlitz, it fulfills the necessary functionality.
The
this.toArray.includes(this.input1_1)checkDropDown1) at present; extending it to others isn't warranted since my current focus involves checking just one.
You'll notice the disabled logic for the Next button, which mandates the entry of all values when the checkbox is ticked—disabling the button upon detection of similarities in either of the locations (i.e., similarity between values in either of the two dropdowns or any of the input fields).
EDIT 2
Evidently, the array values fail to update dynamically post initial assignment. It retains the original value assigned to the variable without reflecting subsequent edits made to the variable (input field).
-- To address this issue, I began splicing array values. Consequently, whenever I invoke a function tasked with checking the array values, I remove the existing value and insert the updated value into the array before conducting a comparison using an if statement nested inside a for loop. This method replaces the original array.include(); with a check denoted by equalValue.
this.fromArray.splice(0, 1, this.input1_1);
this.toArray.splice(0, 1, this.input1_2);
var equalValue = false;
for (let i = 0; i < this.toArray.length; i++) {
if( this.toArray[i] === this.input1_1) {
equalValue = true;
console.log(this.toArray[i]);
console.log(this.input1_1);
break;
}
}
If you have a more efficient solution, please share it—I'll evaluate it and acknowledge it if it indeed resolves the issue better.