Commit 701dc5e

committed

docs: refactor form examples to typed forms

1 parent 52a2586 commit 701dc5eCopy full SHA for 701dc5e

File tree

+11

-10

lines changed

+11

-10

lines changed

Lines changed: 5 additions & 4 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`import { Component } from '@angular/core';`
`2`		`-import { UntypedFormBuilder, Validators } from '@angular/forms';`
	`2`	`+import { FormBuilder, Validators } from '@angular/forms';`
`3`	`3`
`4`	`4`	`@Component({`
`5`	`5`	`selector: 'app-fixture',`
`@@ -35,13 +35,14 @@ export class FormsComponent {`
`35`	`35`	`{ id: 'B', value: 'Blue' },`
`36`	`36`	`{ id: 'G', value: 'Green' },`
`37`	`37`	`];`
	`38`	`+`
`38`	`39`	`form = this.formBuilder.group({`
`39`		`- name: ['', Validators.required],`
	`40`	`+ name: ['', [Validators.required]],`
`40`	`41`	`score: [0, { validators: [Validators.min(1), Validators.max(10)], updateOn: 'blur' }],`
`41`		`- color: ['', Validators.required],`
	`42`	`+ color: [nullasstring\|null, Validators.required],`
`42`	`43`	`});`
`43`	`44`
`44`		`- constructor(private formBuilder: UntypedFormBuilder) {}`
	`45`	`+ constructor(private formBuilder: FormBuilder) {}`
`45`	`46`
`46`	`47`	`get formErrors() {`
`47`	`48`	`return Object.keys(this.form.controls)`

Lines changed: 6 additions & 6 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`import { Component } from '@angular/core';`
`2`		`-import { UntypedFormBuilder, Validators } from '@angular/forms';`
	`2`	`+import { FormBuilder, Validators } from '@angular/forms';`
`3`	`3`
`4`	`4`	`@Component({`
`5`	`5`	`selector: 'app-fixture',`
`@@ -74,14 +74,14 @@ export class MaterialFormsComponent {`
`74`	`74`	`{ id: 'G', value: 'Green' },`
`75`	`75`	`];`
`76`	`76`	`form = this.formBuilder.group({`
`77`		`- name: ['', Validators.required],`
	`77`	`+ name: ['', [Validators.required]],`
`78`	`78`	`score: [0, [Validators.min(1), Validators.max(10)]],`
`79`		`- color: [null, Validators.required],`
`80`		`- date: [null, Validators.required],`
`81`		`- agree: [null, Validators.requiredTrue],`
	`79`	`+ color: [nullasstring\|null, Validators.required],`
	`80`	`+ date: [nullasDate\|null, Validators.required],`
	`81`	`+ agree: [false, Validators.requiredTrue],`
`82`	`82`	`});`
`83`	`83`
`84`		`- constructor(private formBuilder: UntypedFormBuilder) {}`
	`84`	`+ constructor(private formBuilder: FormBuilder) {}`
`85`	`85`
`86`	`86`	`get colorControlDisplayValue(): string \| undefined {`
`87`	`87`	`const selectedId = this.form.get('color')?.value;`

Comments

(0)