Merge pull request #2 from Yu0614/feature/update_readme

Feature/update readme
Yu0614 · Oct 4, 2020 · 46f0a93 · 46f0a93
2 parents 3e700c7 + 2cd51f0
commit 46f0a93
Show file tree

Hide file tree

Showing 3 changed files with 150 additions and 60 deletions.
diff --git a/README.md b/README.md
@@ -1,27 +1,120 @@
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+-   [Project](#project)
+    -   [License](#license)
+    -   [Angular の form について](#angular-%E3%81%AE-form-%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)
+        -   [リアクティブフォーム](#%E3%83%AA%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0)
+            -   [使用方法](#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95)
+            -   [form のデータ更新](#form-%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E6%9B%B4%E6%96%B0)
+            -   [form の validate](#form-%E3%81%AE-validate)
+        -   [テンプレート駆動フォーム](#%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%A7%86%E5%8B%95%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0)
+            -   [使用方法](#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95-1)
+    -   [起動](#%E8%B5%B7%E5%8B%95)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
 # Project
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.1.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.2.
+
+## License
+
+MIT
+
+## Angular の form について
+
+angular には 2 つのフォームスタイルがあり、それぞれ使用方法も思想も違います。
+このレポジトリはそれぞれの使い方をまとめています。
+
+### リアクティブフォーム
+
+#### 使用方法
+
+'@angular/forms' の提供する FormBuilder, FormControl, FormGroup を使用します。
+
+-   ① コンポーネントと HTML 要素の form を formGroup で指定し、リンクさせる
+-   ② formControlName を指定し、コンポーネントのフォーム属性とリンクさせる
+
+```html
+<!-- ① using formGroup to link form with component -->
+<form class="form" [formGroup]="loginForm" (ngSubmit)="submit()">
+    <!-- ② using formControlName to link form with component's attribute -->
+    <input type="email" placeholder="mail" formControlName="mail" required />
+    <input
+        type="password"
+        placeholder="Password"
+        formControlName="password"
+        required
+    />
+</form>
+```
+
+-   ③-1 フォームで使用する対象の属性を FormBuilder 経由で初期化する
+
+```typescript
+// Using FormBuilder to link and initialize form values
+    public loginForm = this.builder.group({
+        mail: [''],
+        password: [''],
+    });
+```
+
+-   ③-2 フォームで使用する対象の属性を FormGroup, FormControl 経由で初期化する
+
+```typescript
+// This also possible though it could be troublesome (using instance..)
+    public loginForm = new FormGroup({
+        mail: new FormControl(''),
+        password: new FormControl(''),
+    });
+```
 
-## Development server
+#### form のデータ更新
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+-   FormGroup のメソッド経由で値を更新する
 
-## Code scaffolding
+```typescript
+// 特定の要素のみ値を更新する際には patchValue を使用する
+this.loginForm.patchValue({
+    mail: '[email protected]',
+});
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+// すべての要素を更新する際には setValue を使用する
+this.loginForm.setValue({
+    mail: '[email protected]',
+    password: 'password',
+});
+```
 
-## Build
+#### form の validate
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+-   formGroup で Validators 経由の validate をかける
+-   input 要素に required を追加する
 
-## Running unit tests
+```typescript
+// Validators 経由で Validate をかける
+public loginForm = this.builder.group({
+        mail: ['', Validators.email], // validates whether email format or not
+        password: ['', Validators.required], // validates form filled or not
+    });
+```
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+```html
+<!-- html の input要素に require を追加 -->
+<input type="email" placeholder="mail" formControlName="mail" required />
+<input
+    type="password"
+    placeholder="Password"
+    formControlName="password"
+    required
+/>
+```
 
-## Running end-to-end tests
+### テンプレート駆動フォーム
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+#### WIP
 
-## Further help
+## 起動
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+`ng serve` で 起動します.
diff --git a/package.json b/package.json
@@ -1,47 +1,46 @@
 {
-  "name": "angular-form-differences",
-  "version": "0.0.0",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "~10.1.2",
-    "@angular/common": "~10.1.2",
-    "@angular/compiler": "~10.1.2",
-    "@angular/core": "~10.1.2",
-    "@angular/forms": "~10.1.2",
-    "@angular/platform-browser": "~10.1.2",
-    "@angular/platform-browser-dynamic": "~10.1.2",
-    "@angular/router": "~10.1.2",
-    "rxjs": "~6.6.3",
-    "tslib": "^2.0.0",
-    "zone.js": "~0.10.2"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1001.2",
-    "@angular/cli": "~10.1.2",
-    "@angular/compiler-cli": "~10.1.2",
-    "@angular/language-service": "~10.1.2",
-    "@types/node": "^12.11.1",
-    "@types/jasmine": "~3.5.0",
-    "@types/jasminewd2": "~2.0.3",
-    "codelyzer": "^5.1.2",
-    "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.0.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~3.0.2",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
-    "protractor": "~7.0.0",
-    "ts-node": "~8.3.0",
-    "tslint": "~6.1.0",
-    "typescript": "~4.0.3"
-  }
+    "name": "angular-form-differences",
+    "version": "0.0.0",
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve",
+        "build": "ng build",
+        "test": "ng test",
+        "lint": "ng lint"
+    },
+    "private": true,
+    "dependencies": {
+        "@angular/animations": "~10.1.2",
+        "@angular/common": "~10.1.2",
+        "@angular/compiler": "~10.1.2",
+        "@angular/core": "~10.1.2",
+        "@angular/forms": "~10.1.2",
+        "@angular/platform-browser": "~10.1.2",
+        "@angular/platform-browser-dynamic": "~10.1.2",
+        "@angular/router": "~10.1.2",
+        "rxjs": "~6.6.3",
+        "tslib": "^2.0.0",
+        "zone.js": "~0.10.2"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "~0.1001.2",
+        "@angular/cli": "~10.1.2",
+        "@angular/compiler-cli": "~10.1.2",
+        "@angular/language-service": "~10.1.2",
+        "@types/node": "^12.11.1",
+        "@types/jasmine": "~3.5.0",
+        "@types/jasminewd2": "~2.0.3",
+        "codelyzer": "^5.1.2",
+        "jasmine-core": "~3.5.0",
+        "jasmine-spec-reporter": "~5.0.0",
+        "karma": "~5.0.0",
+        "karma-chrome-launcher": "~3.1.0",
+        "karma-coverage-istanbul-reporter": "~3.0.2",
+        "karma-jasmine": "~4.0.0",
+        "karma-jasmine-html-reporter": "^1.5.0",
+        "protractor": "~7.0.0",
+        "ts-node": "~8.3.0",
+        "tslint": "~6.1.0",
+        "typescript": "~4.0.3"
+    }
 }
diff --git a/src/app/reactive/reactive.component.ts b/src/app/reactive/reactive.component.ts
@@ -53,8 +53,6 @@ export class ReactiveComponent implements OnInit {
      */
     submit() {
         this.meta.submitted = true;
-        console.log(this.loginForm);
-        console.log(this.loginForm.status);
         if (this.formStatus) {
             window.alert(JSON.stringify(this.loginForm.value));
         }