angular的第一个项目总结

最新推荐文章于 2023-03-24 16:40:50 发布

lucky2_

最新推荐文章于 2023-03-24 16:40:50 发布

阅读量265

点赞数

分类专栏： angular 文章标签： angular 上传文件表单验证文件类型判断数据绑定

本文链接：https://blog.csdn.net/lucky2_/article/details/100779487

版权

angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

感悟：

从不到三天时间写出18个页面，当然内容不复杂，主要在于表单的验证比较繁琐，一开始用的angular框架中蚂蚁金服的表单验证，需求中途改了之后，表单验证就被否了，全部用了if去判断，之后提交文件的判断逻辑一开始看着挺繁琐，可能不了解这个东西的业务，就不理解产品的思路，他意思是五个材料上传为非必填项，上传文件的格式为Word、Excel、PDF、图片，每个上传的限制上传文件最多为5件，每个文件的大小不大于10M，同一材料的多个上传文件的格式需为同一格式；就是你第一个上传文件后，之后上传的文件类型都需要和第一个一致，一致的又一个意思就是比如你第一个文件是png，第二个也可以是jpg，gif等等。
总得来说，分为六个模块去总结一下这次的收获。

angular组件间传参
angular表单验证
文件类型的判断和上传
get方法的请求
命令行新建组件
路由
提交数据

angular组件间传参

父组件中引入子组件，

<app-upload-document [hidden]="!next" (prev)="prev($event)" (submit)="submit($event)" [dataList]="dataList" [substationName]="substationName"></app-upload-document>

在子组件中使用Input，传入进来dataList和substationName两个参数，output传出两个方法prev和submit

  @Output() prev = new EventEmitter<any>();
  @Output() submit = new EventEmitter<any>();
  @Input() dataList;
  @Input() substationName;

angular表单验证

先是验证非空，这里一开始使用蚂蚁金服的表单验证，之后发现跟实际需求不匹配，过于复杂，之后采用if判断去判断非空、身份证号和邮箱的合法性。这里是在进行下一步操作的时候触发checkform方法

  checkForm() {
    // tslint:disable-next-line: max-line-length
    const testCode =  /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
    const contactBlank = /^([a-zA-Z\d])(\w|\-)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/;
    if (!this.nowHouse) {
      this.message.warning('现所属机构未输入！');
    } else if (!this.lawyerChange) {
      this.message.warning('变更律师未输入！');
    } else if (this.applyName.length <= 0) {
      this.message.warning('联系人姓名输入不正确！');
    } else if (this.applyCard.length !== 18) {
      this.message.warning('联系人身份证号码输入不正确！');
    } else if (!testCode.test(this.applyCard)) {
      this.message.warning('联系人身份证号码输入不正确！');
    } else if (this.applyPhone.length !== 11) {
      this.message.warning('联系人手机号输入不正确！');
    } else if (this.applyEmail.length <= 0) {
      this.message.warning('联系人邮箱未输入！');
    } else if (!contactBlank.test(this.applyEmail)) {
      this.message.warning('联系人邮箱输入不正确！');
    } else {
    this.next = true;//跳转下一个页面
    }
  }

文件类型的判断和上传

首先判断是否符合所需要的文件类型，符合之后再根据第一个上传类型判断之后上传的文件类型是否符合要求，在判断之前，要先对文件状态做判断，容易忽略的一种就是文件删除时候的removed状态
这里先用的蚂蚁金服的上传文件组件

<nz-upload [nzAction]="uploadurl" [nzLimit]="1"  [nzSize]="10240" (nzChange)="handleChange($event, i)" [(nzFileList)]="data.documentList">
     <button nz-button><i nz-icon nzType="upload"></i><span>上传文件</span></button>
</nz-upload>

在ts中调用handleChange方法

  handleChange(e, index) {
    console.log(e);
    const status = e.type;
    if (status === 'removed') {
      this.documentList = e.fileList;
      this.ids = [];
      const STATUS = 'status';
      const RESPONSE = 'response';
      const MESSAGE = 'message';
      this.documentList.forEach((file) => {
        if (file[STATUS] === 'done' && file.hasOwnProperty(RESPONSE)) {
          if (file[RESPONSE].hasOwnProperty('uid')) {
            this.ids.push(file[RESPONSE].uid);
          } else if (file[RESPONSE].error === 0) {
            this.ids.push(file[RESPONSE].fileId);
          } else {
            file[STATUS] = 'error';
            file[MESSAGE] = file[RESPONSE].message;
          }
        } else {
          this.ids.push(file.id);
        }
      });
      this.dataList[index].fileIdarray = this.ids;
      console.log(this.dataList);
    } else if (status !== 'success') {
      return;
    } else if (status === 'success') {
      const docunmentType = e.file.type;
      const suffixname = e.file.name.split('.');
      const suffixName = suffixname[suffixname.length - 1];
      // tslint:disable-next-line: max-line-length
      if (suffixName !== 'png' && suffixName !== 'bmp' && suffixName !== 'jpeg' && suffixName !== 'jpg' && suffixName !== 'tif' && suffixName !== 'gif' && suffixName !== 'pdf' && suffixName !== 'doc' && suffixName !== 'docx' && suffixName !== 'xls' && suffixName !== 'xlsx') {
        this.nzModalService.error({
          nzTitle: '提示',
          nzContent: '上传文件格式错误！',
        });
        e.fileList.pop();
        return;
      } else {
        if (e.fileList.size > '102400') {
          this.nzModalService.error({
            nzTitle: '提示',
            nzContent: '上传文件大小最大为10M',
          });
          e.fileList.pop();
          return;
        }
        if (e.fileList.length > 5) {
          this.nzModalService.error({
            nzTitle: '提示',
            nzContent: '上传文件数量最多为5件',
          });
          e.fileList.pop();
          return;
        }
        const suffix = e.file.name.split('.');
        const suffixed = suffix[suffix.length - 1];
        console.log(suffixed);

        if (e.fileList.length === 1) {
          if (e.file.type.split('/', 1)[0] === 'image') {
            this.dataList[index].filetype = '图片';
          } else if (suffixed === 'doc' || suffixed === 'docx') {
            this.dataList[index].filetype = '文档';
          } else if (suffixed === 'pdf') {
            this.dataList[index].filetype = 'PDF';
          } else if (suffixed === 'xls' || suffixed === 'xlsx') {
            this.dataList[index].filetype = 'Excel';
          }
        }

        if (e.fileList.length > 1) {
          if (e.file.type.split('/', 1)[0] === 'image') {
            if (this.dataList[index].filetype !== '图片') {
              this.nzModalService.error({
                nzTitle: '提示',
                nzContent: '上传文件格式不一致',
              });
              e.fileList.pop();
            }
          } else if (suffixed === 'doc' || suffixed === 'docx') {
            if (this.dataList[index].filetype !== '文档') {
              this.nzModalService.error({
                nzTitle: '提示',
                nzContent: '上传文件格式不一致',
              });
              e.fileList.pop();
            }
          } else if (suffixed === 'pdf') {
            if (this.dataList[index].filetype !== 'PDF') {
              this.nzModalService.error({
                nzTitle: '提示',
                nzContent: '上传文件格式不一致',
              });
              e.fileList.pop();
            }
          } else if (suffixed === 'xls' || suffixed === 'xlsx') {
            if (this.dataList[index].filetype !== 'Excel') {
              this.nzModalService.error({
                nzTitle: '提示',
                nzContent: '上传文件格式不一致',
              });
              e.fileList.pop();
            }
          }
        }
        this.documentList = e.fileList;
        this.ids = [];
        const STATUS = 'status';
        const RESPONSE = 'response';
        const MESSAGE = 'message';
        this.documentList.forEach((file) => {
          if (file[STATUS] === 'done' && file.hasOwnProperty(RESPONSE)) {
            if (file[RESPONSE].hasOwnProperty('uid')) {
              this.ids.push(file[RESPONSE].uid);
            } else if (file[RESPONSE].error === 0) {
              this.ids.push(file[RESPONSE].fileId);
            } else {
              file[STATUS] = 'error';
              file[MESSAGE] = file[RESPONSE].message;
            }
          }
        });
        this.dataList[index].fileIdarray = this.ids;
      }
    }
  }

上传成功之后把fileId放入fileIDarray传给后端。

get方法的请求

get请求后端数据

  getLawfirm(value) {
    this.restclient.requestGet(
      '请求地址?keyName=' + value,
    ).then(res => {
      console.log(res);
      if (res.code === 1) {
        console.log(res.result);
        this.lawfirmlist = res.result;
      }
    }).catch(err => {
      console.log(err);
    });
  }

请求时候，一开始对接口文档不熟悉，地址混淆写错

<nz-select class="list-select" nzPlaceHolder="请选择申请机构" nzShowSearch formControlName="applyHouse" [(ngModel)]="lawfirm" (nzOnSearch)="getLawfirm($event)" (ngModelChange)="changeLawfirm($event)">
     <nz-option [nzValue]="item" [nzLabel]="item.name" *ngFor="let item of lawfirmlist"></nz-option>
 </nz-select>

(nzOnSearch)方法是选择框的值发生变化时调用的方法
(ngModelChange)方法是option变化时调用的方法

数据的管理

<div class="select-list-tip pull-left">
 <nz-select class="list-select" nzPlaceHolder="请选择拟变更组织形式" nzAllowClear nzShowSearch formControlName="addparterPeople" [(ngModel)]="afterShapetype.aftertype">
       <nz-option [nzValue]="item.id" [nzLabel]="item.name" *ngFor="let item of afterShapetype.aftertypeList"></nz-option>
 </nz-select>

在ts中：

afterShapetype: any = {
    aftertypeList: [
      {
        name: '普通合伙',
        id: 'Partner'
      },
      {
        name: '特殊的普通合伙',
        id: 'Special'
      },
      {
        name: '个人',
        id: 'Personal'
      },
      {
        name: '国资',
        id: 'StateOwned'
      },
      {
        name: '合作',
        id: 'Corp'
      },
    ],
    aftertype: null
  };

[(ngModel)] 是 Angular 的双向数据绑定语法，不管是input还是选择器，一定要做数据的双向绑定
数据绑定三种形式：
（1）插值绑定，substationName显示ts中的值

 <div class="lawyer-tilte">{{substationName}}</div>

（2）[substationName]属性绑定把值传给字组件

<app-upload-document [hidden]="!next" (prev)="prev($event)" (submit)="submit($event)" [dataList]="dataList" [substationName]="substationName"></app-upload-document>

（3）事件绑定，click方法点击后调用

<button class="next-step" (click)="totalSubmit()">提&nbsp;交</button>

命令行新建组件：

ng generate component XXX

路由

（1）定义路由数组，在app-routing.module.ts中

const routes: Routes = [
  { path: '', redirectTo: '/entrance', pathMatch: 'full' },
  { path: 'index', component: IndexComponent },
  { path: 'house-allname', component: HouseAllnameComponent, },
  { path: 'house-onlyname', component: HouseOnlynameComponent, },
  { path: 'substation-leader', component: SubstationLeaderComponent, },
  { path: 'substation-cancel', component: SubstationCancelComponent, },
];

（2）路由链接

<nav> <a routerLink="/"></a> </nav>

（3）默认路由，在app-routing.modules.ts中

  { path: '', redirectTo: '/entrance', pathMatch: 'full' },

提交数据

submit(datalist) {
    console.log(datalist);
    const params = {
      application: datalist[0].fileIdarray,
      justiceProve: datalist[1].fileIdarray,
      licenseFile: datalist[2].fileIdarray,
      licenseFileCopy: datalist[3].fileIdarray,
      parentLawfirmLicenseFile: datalist[4].fileIdarray,

      newName: this.afteronlyName,
      email: this.applyEmail,
      name: this.applyName,
      mobile: this.applyPhone,
      idNumber: this.applyCard,
      applyOrg: this.lawfirm,
      type: 'SubLawfirmChangeName'
    };
    this.restclient.request('/service/rest/nal.NALService/collection/create', params).then(res => {
      if (res.code === 1) {
        this.router.navigate(['/upload-success', { name: this.substationName, code: res.description }]);
      } else {
        this.router.navigate(['/upload-fail']);
      }
    }).catch(err => {
      console.log(err);
    });
  }

在过程中，总会出现这样那样的失误，严谨细心最重要吧~