angular7响应式表单基本使用

素颜马尾好姑娘i 2022-01-31 03:45 206阅读 0赞

#### 案例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('a@a.com'),
                new FormControl('b@b.com')
            ])
        });
    
        constructor() { }
    
        ngOnInit() {
        }
    
        onSubmit() {
            console.log(this.formModel.value);
        }
    
        adEmail() {
            let emails = this.formModel.get('emails') as FormArray;
            emails.push(new FormControl(''));
        }
    
    }

#### 案例2 ####

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);
     }