表单写法备份（Zorro）

来源：互联网发布：python bloomfilter 编辑：程序博客网时间：2024/06/08 09:38

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

阅读全文

0 0