För en djupare förståelse om hur data flödar från inmatningsfält till modell-värde till vy-värde presenterar vi flödesscheman.

Utan parser och formaterare

graph LR
	FTextField["`**FTextField**
	    "AbcD"`"]
    validerar?{"`**Validerar?**
	    "AbcD"`"}
    trim["trim()"]
    modelValue[("`**modelValue**
	    "AbcD"`")]

    FTextField -. "Ändrar värde\n(blur)" .-> validerar?
    validerar? -- Ja --> trim
    validerar? -- Nej --> modelValue
    trim --> modelValue

Formaterare utan parser

I detta exempel använder vi en fiktiv formaterare som ändrar skiftläge till gemener.

function myFormatter(value: string): string {
    return value.toLowerCase();
}

graph LR
	FTextField["`**FTextField**
	    "AbcD"`"]
    validerar?{"`**Validerar?**
	    "AbcD"`"}
    modelValue[("`**modelValue**
	    "abcd"`")]
    viewValue[("`**viewValue**
	    "abcd"`")]
    pformatter["formatter()"]
    ptrim["trim()"]
    stringify["String()"]

    FTextField -. "Ändrar värde\n(blur)" .-> validerar?
    validerar? -- Ja --> ptrim
    validerar? -- Nej --> modelValue
    ptrim --> pformatter
    pformatter --> modelValue
    modelValue -. watcher .-> stringify
    stringify -. Uppdaterar .-> viewValue

Parser utan formaterare

I detta exempel använder vi en fiktiv parser som ändrar skiftläge till versaler.

function myParser(value: string): string {
    return value.toUpperCase();
}

 <f-text-field
+    :parser="myParser"
 ></f-text-field>

graph LR
	FTextField["`**FTextField**
	    "AbcD"`"]
    validerar?{"`**Validerar?**
	    "AbcD"`"}
    modelValue[("`**modelValue**
	    "ABCD"`")]
    pparser["parser()"]
    ptrim["trim()"]

    FTextField -. "Ändrar värde\n(blur)" .-> validerar?
    validerar? -- Ja --> ptrim
    ptrim --> pparser
    validerar? -- Nej --> modelValue
    pparser --> modelValue

Eftersom ingen formaterare finns uppdateras inte vy-värdet.

Formaterare och parser

I detta exempel kombinerar vi formateraren och parsern från tidigare flöden.

graph LR
	FTextField["`**FTextField**
	    "AbcD"`"]
    modelValue[("`**modelValue**
	    "ABCD"`")]
    viewValue[("`**viewValue**
	    "abcd"`")]
    validerar?{"`**Validerar?**
	    "AbcD"`"}
    pparser["parser()"]
    ptrim["trim()"]
    wformatter["formatter()"]
    stringify["String()"]

    FTextField -. "Ändrar värde\n(blur)" .-> validerar?
    validerar? -- Ja --> ptrim
    ptrim --> pparser
    validerar? -- Nej --> modelValue
    pparser --> modelValue
    modelValue -. watcher .-> wformatter
    wformatter --> stringify
    stringify -. Uppdaterar .-> viewValue

Programmatisk uppdatering av model-värde

Vid programmatisk uppdatering av model-värde uppdateras vy-värde automatiskt. Vy-värdet formateras om en formaterare är angiven. Om även en parser är angiven utöver formaterare så parsas värdet innan det formateras. Misslyckas parsning eller formatering på vägen så sätts vy-värdet till model-värdet.

graph LR
    modelValue[("`**modelValue**
	    "AbcD"`")]
    viewValue[("`**viewValue**
	    "abcd"`")]
    stringify["String()"]
    wparser["parser()"]
    wformatter["formatter()"]

    modelValue -. watcher .-> wparser
    wparser --> wformatter
    wformatter --> stringify
    stringify -. Uppdaterar .-> viewValue

Relaterat

(Formatering och parsning)