angular7響應式表單基本使用

案例1：

**使用響應式表單需要在app.module.ts中引入ReactiveFormsModule **

import { ReactiveFormsModule } from '@angular/forms';

<form [formGroup]="formModel" (ngSubmit)="onSubmit()">
    <div formGroupName="dateRange">
        起止日期：<input type="date" formControlName="from"> <br>
        截止日期：<input type="date" formControlName="to">
    </div>
    <div>
        <ul formArrayName="emails">
            <li *ngFor="let item of this.formModel.get('emails').controls; let i = index;">
                <input type="text" [formControlName]="i">
            </li>
        </ul>
        <button (click)="adEmail()">增加email</button>
    </div>
    <button type="submit">儲存</button>
</form>
           

export class Form3Component implements OnInit {

    formModel: FormGroup = new FormGroup({
        dateRange: new FormGroup({
            from: new FormControl(),
            to: new FormControl()
        }),
        emails: new FormArray([
            new FormControl('[email protected]'),
            new FormControl('[email protected]')
        ])
    });

    constructor() { }

    ngOnInit() {
    }

    onSubmit() {
        console.log(this.formModel.value);
    }

    adEmail() {
        let emails = this.formModel.get('emails') as FormArray;
        emails.push(new FormControl(''));
    }

}

           

案例2

<form [formGroup]="formModel" (ngSubmit)="onSubmit()">
    <div>
        使用者名：<input type="text" formControlName="username">
    </div>
    <div>
        手機号：<input type="number" formControlName="mobile">
    </div>
    <div formGroupName="passwordsGroup">
        <div>
            密碼：<input type="password" formControlName="password">
        </div>
        <div>
            确認密碼：<input type="password" formControlName="pconfirm">
        </div>
    </div>
    <button>注冊</button>
</form>
           

formModel: FormGroup;

constructor() {
    this.formModel = new FormGroup({
        username: new FormControl(),
        mobile: new FormControl(),
        passwordsGroup: new FormGroup({
            password: new FormControl(),
            pconfirm: new FormControl()
        })
    });
}

ngOnInit() {
}

onSubmit() {
    console.log(this.formModel.value);
}
           

案例3

使用formBuilder簡寫響應式表單

constructor(private fb: FormBuilder) { }

 formModel = this.fb.group({
     username: [''],
     mobile: [''],
     passwordsGroup: this.fb.group({
         password: [''],
         pconfirm: ['']
     })
 });

 ngOnInit() {
 }

 onSubmit() {
     console.log(this.formModel.value);
 }