J'ai une forme angulaire:
Dans mon tiroir Modifier, il y aura trois champs. Ils sont id , ip et port . Lors de la modification, j'ai désactivé l'ID de champ. L'utilisateur ne peut changer que ip / port ou les deux.
Si l'utilisateur ne change aucune valeur dans le tiroir Modifier, j'ai désactivé le bouton Mais le problème est que si j'efface 1 symbole dans les champs, puis écrivez-le à nouveau (la valeur est identique, mais la forme a été modifiée),
Je dois à nouveau désactiver le bouton Mettre à jour .
Mettre à jour . Mais comment puis-je faire cela?
3 Réponses :
Vous pouvez stocker la valeur précédente dans un objet et vérifier si la valeur actuelle correspond à la précédente. Je vais écrire un exemple de code ci-dessous:
composant.ts code> h3> xxx pré> fichier composant.html code> H3> <button mat-flat-button color="primary" [disabled]='isDisabled()' *ngIf="title== 'Edit'" (click)="editappawareinfo(drawer)">Update</button>
@Bear, je pense que c'est plus "confortable" en utilisant un opérateur de paire RXJS, voir ma réponse
@Eliseo, eh bien, votre solution fonctionne essentiellement une seule fois. Quoi Retour à MyIP (et chaque fois quitte le champ). Votre solution passera car il vérifie par paires pour MyIP2 et MyIP , alors que OP veut vérifier si l'utilisateur a repéré la valeur d'origine.
Si vous utilisez des formes réactives, il est facile de contrôler lorsqu'un changement de formeControl
Imaginez que vous ayez une formeControl avec "Mettre à jour: flou" Vous pouvez vous abonner à changer Payswise RXJS opérateur comme Eh bien, j'utilise un formulaireControl, vous pouvez utiliser un groupe de formulaires ou un formaire et vous abonner aux valeurs de valeur voir un Stackblitz
Si vous avez une forme réactive (et si vous ne le faites pas, je vous suggère de faire à la place) stockez la valeur d'origine et comparez-la à la valeur du formulaire. Si vous n'avez pas d'objet profondément imbriqué, vous pouvez utiliser en toute sécurité json.stringify code> pour comparer deux objets. Donc: appawareform: FormGroup;
alive = true;
noChanges = true;
// maybe getting this from backend? Here just mocking the response
data = { id: 1, ip: "myip", port: "myPort" };
constructor(private fb: FormBuilder) {
this.appawareform = this.fb.group({
id: [{ value: "", disabled: true }],
ip: [""],
port: [""]
});
// call this when values are available
this.appawareform.setValue(this.data);
this.appawareform.valueChanges
.pipe(takeWhile(() => this.alive))
.subscribe(val => {
if (
JSON.stringify(this.data) ===
// we have a disabled field we need to use "getRawValue()"
JSON.stringify(this.appawareform.getRawValue())
) {
this.noChanges = true;
} else {
this.noChanges = false;
}
});
}
ngOnDestroy() {
// unsubscribes subscrption on component destroy
this.alive = false;
}
IP est un protocole; Ce sont des adresses IP statiques, filtrées, bloquées, attribuées, liées, récupérées, accédées, résolues, vérifiées, interdites, suivies, détectées, dynamiques, saisies, numérisées, blanchies, ont des représentations différentes, que les appareils ont, etc., etc., le protocole lui-même.