表单写法备份（Zorro）

最新推荐文章于 2023-08-03 22:56:37 发布

土豆逆袭la

最新推荐文章于 2023-08-03 22:56:37 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：项目随笔 angularjs 文章标签：备份表单

本文链接：https://blog.youkuaiyun.com/kassiaaaa/article/details/78651505

项目随笔同时被 2 个专栏收录

25 篇文章

订阅专栏

angularjs

16 篇文章

订阅专栏

本文介绍了Ant Design中表单元素的不同布局方式，包括标签与输入框的上下及左右排列，并展示了如何使用下拉列表从后台获取数据以及如何获取文本框的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.标签和文本框上下排列

<div nz-form-item>
        <div nz-form-control [nzValidateStatus]="validateForm.controls.field_name">
            <label class="dinlineblock">field_name:</label>
            <nz-input formControlName="field_name" [nzPlaceHolder]="'field_name'" [nzSize]="'large'"></nz-input>
            <div nz-form-explain *ngIf="validateForm.controls.field_name.dirty&&validateForm.controls.field_name.hasError('required')">Please input field_name!</div>
        </div>
    </div>

2.标签和文本框左右排列nz-row：

    <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="8" [nzXs]="24" [nzLg]="8">
            <label nz-form-item-required>field_des</label>
        </div>
        <div nz-form-control nz-col [nzSm]="16" [nzXs]="24" [nzLg]="16" nzHasFeedback [nzValidateStatus]="validateForm.controls.field_des">
            <nz-input [nzSize]="'large'" formControlName="field_des" [nzId]="'field_des'"></nz-input>
            <div nz-form-explain *ngIf="validateForm.controls.field_des.dirty&&validateForm.controls.field_des.hasError('required')">Please input field_des!</div>
        </div>
    </div>

3.若select下拉列表的数据是从后台获取的话，就这么写：

 <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="8" [nzXs]="24" [nzLg]="8">
            <label nz-form-item-required>field_foreginkey</label>
        </div>
        <div nz-form-control nz-col [nzSm]="16" [nzXs]="24" [nzLg]="16" nzHasFeedback [nzValidateStatus]="validateForm.controls.field_foreginkey">
            <nz-select style="width:100%;" formControlName="field_foreginkey" [nzSize]="size" [nzPlaceHolder]="'Please select field_foreginkey!'">
                <nz-option
                        *ngFor="let option of tables"
                        [nzLabel]="option.name"
                        [nzValue]="option"
                        [nzDisabled]="option.disabled">
                </nz-option>
                <!--还要去掉多选option里的option.value中的value;-->
            </nz-select>
            <div nz-form-explain *ngIf="validateForm.controls.field_foreginkey.dirty&&validateForm.controls.field_foreginkey.hasError('required')">Please input field_foreginkey!</div>
        </div>
    </div>

//ts.的写法注意：（这里因为要找表的外键，所以.id能拿到外键表的id）
let keyforginkey=this.validateForm.controls.field_foreginkey.value.id; //获取选择外键的id–关键还要去掉多选option里的option.value中的value;

4.获取文本框的值
（这是在nz-form-control存在[nzValidateStatus]=”validateForm.controls.field_foreginkey”这个属性的前提下）
let keyforginkey=this.validateForm.controls.field_foreginkey.value