angular 11 FormBuilder 中 FormGroup 和 FormArray 使用

Fork Me On Github

angular 11 FormBuilder 中 FormGroup 和 FormArray 使用

导入模块

ts
      
@NgModule({
    imports: [
        ReactiveFormsModule,
    ],
})
export class AppModule {}
123456

注入组件

ts
     
export class EditComponent {
    constructor(
        private fb: FormBuilder,
    ) { }
}
12345

普通表单具体代码

初始化表单

ts
         
export class EditComponent {
    public form = this.fb.group({
        name: ['', Validators.required],
    });

    constructor(
        private fb: FormBuilder,
    ) { }
}
123456789

绑定表单页面

html
           
<form [formGroup]="form" (ngSubmit)="tapSubmit()">
    <div class="form-group row">
        <label for="name" class="col-md-3 col-form-label">称呼</label>
        <div class="col-md-9">
            <input type="text" class="form-control" formControlName="name" id="name" placeholder="请输入称呼">
        </div>
    </div>
    <div class="row">
        <button class="btn btn-primary offset-md-3">保存</button>
    </div>
</form>
1234567891011

设置值

ts
   
this.form.patchValue({
    name: res.name,
});
123

特殊表单项:一个可变的数组

FormArray 必须为 FormGroup 的子项

初始化表单

ts
                           
export class EditComponent {
    public form = this.fb.group({
        name: ['', Validators.required],
        children: this.fb.array([])
    });

    constructor(
        private fb: FormBuilder,
    ) { }

    get children() {
        return this.form.get('children') as FormArray;
    }

    public addChild() {
        this.children.push(this.fb.group({
            name: ['', Validators.required],
            label: ['', Validators.required],
            required: [false],
            only: [false],
        }));
    }

    public removeChild(i: number) {
        this.children.removeAt(i);
    }
}
123456789101112131415161718192021222324252627

绑定表单页面

html
                                                  
<form [formGroup]="form" (ngSubmit)="tapSubmit()">
    <div class="form-group row">
        <label for="name" class="col-md-3 col-form-label">称呼</label>
        <div class="col-md-9">
            <input type="text" class="form-control" formControlName="name" id="name" placeholder="请输入称呼">
        </div>
    </div>
    <table class="table table-hover">
        <thead>
            <tr>
                <th>名称</th>
                <th>别名</th>
                <th>是否必填</th>
                <th>不公开</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor="let item of children.controls; let i = index">
                <tr [formGroup]="item">
                    <td>
                        <input type="text" formControlName="name" class="form-control">
                    </td>
                    <td>
                        <input type="text" formControlName="label" class="form-control">
                    </td>
                    <td>
                        <input type="checkbox" formControlName="required" value="1"  >
                    </td>
                    <td>
                        <input type="checkbox" formControlName="only" value="1" >
                    </td>
                    <td>
                        <i class="iconfont icon-close" (click)="removeChild(i)"></i>
                    </td>
                </tr>
            </ng-container>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">
                    <i class="iconfont icon-plus" (click)="addChild()"></i>
                </td>
            </tr>
        </tfoot>
    </table>
    <div class="row">
        <button class="btn btn-primary offset-md-3">保存</button>
    </div>
</form>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950

设置值

ts
   
for (const item of items) {
    this.children.push(this.fb.group(item));
}
123
点击查看全文
标签: angular
0 508 0
在 angular 项目中实现对页面的访问控制
按下回车键,焦点移动到下一个表单或提交表单
使用ng-template 显示tree结构数据
使用 ViewContainerRef.createComponent 替代 ComponentFactoryResolver
angular 12使用 KaTex 显示 AsciiMath 格式的公式