diff --git a/forms/src/app/app.component.html b/forms/src/app/app.component.html index 266cad7..8f697b9 100644 --- a/forms/src/app/app.component.html +++ b/forms/src/app/app.component.html @@ -6,3 +6,5 @@

{{title}}

+ + \ No newline at end of file diff --git a/forms/src/app/app.module.ts b/forms/src/app/app.module.ts index 8f60312..259ea93 100644 --- a/forms/src/app/app.module.ts +++ b/forms/src/app/app.module.ts @@ -7,13 +7,15 @@ import { AppComponent } from './app.component'; import { LoginFormComponent } from './login-form/login-form.component'; import { ModelFormComponent } from './model-form/model-form.component'; import { LoginModelFormComponent } from './login-model-form/login-model-form.component'; +import { ArrayFormComponent } from './array-form/array-form.component'; @NgModule({ declarations: [ AppComponent, LoginFormComponent, ModelFormComponent, - LoginModelFormComponent + LoginModelFormComponent, + ArrayFormComponent ], imports: [ BrowserModule, diff --git a/forms/src/app/array-form/array-form.component.css b/forms/src/app/array-form/array-form.component.css new file mode 100644 index 0000000..19b39de --- /dev/null +++ b/forms/src/app/array-form/array-form.component.css @@ -0,0 +1,21 @@ +:host { + display: flex; +} + +.container { + background-color: #E2CEFF; +} + +button[disabled] { + color: gray; +} + +.output { + padding: 10px; + border-radius: 10px; + background: #f4e6ff; +} + +.error { + color: red; +} \ No newline at end of file diff --git a/forms/src/app/array-form/array-form.component.html b/forms/src/app/array-form/array-form.component.html new file mode 100644 index 0000000..3507749 --- /dev/null +++ b/forms/src/app/array-form/array-form.component.html @@ -0,0 +1,27 @@ +
+

New Client (Dynamic Fields with FormArrays)

+
+
+ +
Location must be greater than 5 characters!
+
+ + + +
+
+ +
Cannot save, location has to be greater than 5 characters
+
+
+ +
+
{{form.value}}
+
+
\ No newline at end of file diff --git a/forms/src/app/array-form/array-form.component.ts b/forms/src/app/array-form/array-form.component.ts new file mode 100644 index 0000000..adf7b41 --- /dev/null +++ b/forms/src/app/array-form/array-form.component.ts @@ -0,0 +1,44 @@ +import { Component, OnInit } from '@angular/core'; +import { FormArray, FormControl, Validators } from '@angular/forms'; + +@Component({ + selector: 'phone-numbers', + templateUrl: './array-form.component.html', + styleUrls: ['./array-form.component.css'] +}) +export class ArrayFormComponent { + form; + placeholders = [ + 'Name', + 'Job' + ]; + output; + + constructor() { + this.form= new FormArray([ + new FormControl(''), + new FormControl('') + ]); + } + + addEmail() { + // if email field has already been added, don't add it again + if (this.placeholders.indexOf('Email') === -1) { + this.form.push(new FormControl('')); + this.placeholders.push('Email'); + } + } + + addLocation() { + // if location field has already been added, don't add it again + if (this.placeholders.indexOf('Location') === -1) { + this.form.push(new FormControl('', Validators.minLength(5))); + this.placeholders.push('Location'); + } + } + + save() { + this.output = this.form.value; + } + +} diff --git a/forms/src/app/model-form/model-form.component.ts b/forms/src/app/model-form/model-form.component.ts index 7ab767a..65f99bb 100644 --- a/forms/src/app/model-form/model-form.component.ts +++ b/forms/src/app/model-form/model-form.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import {FormBuilder, FormGroup, Validators, FormControl} from '@angular/forms'; @Component({ selector: 'model-form', @@ -8,6 +8,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms'; }) export class ModelFormComponent implements OnInit { + welcomeMessage: string; fg: FormGroup; constructor(formBuilder: FormBuilder) { @@ -15,13 +16,20 @@ export class ModelFormComponent implements OnInit { 'name': ['Tammy', Validators.required], 'surname': ['Trinh', Validators.required], 'email': ['tam@york.tv', Validators.required], - 'gender': ['female', Validators.required] + 'gender': ['female', Validators.required], + 'greeting': ['Greet with message'], + 'welcome': new FormControl({disabled: true}) }); } ngOnInit() { } - +/* + enableWelcomeMessage () { + this.fg.addControl('message'); + this.welcomeMessage = 'congrats on remembering your password!'; + } +*/ onSubmit(value) { console.log(JSON.stringify(value)); } diff --git a/routes/app/assets/mount-yamnuska2-szmurlo.jpg b/routes/app/assets/mount-yamnuska2-szmurlo.jpg deleted file mode 100644 index 697b840..0000000 Binary files a/routes/app/assets/mount-yamnuska2-szmurlo.jpg and /dev/null differ