Angular-formly与Django对接及相关功能实现技术咨询

Hey there! Let’s break down your three questions with practical, actionable solutions— I’ve built apps with Angular-formly + Django before, so these approaches should work for you:

1. 实现Angular-formly表单与Django及MySQL的数据双向传输 #

双向传输本质是前端提交表单数据到Django API，后端持久化到MySQL；同时前端从Django API拉取数据填充表单。这里用Django REST Framework (DRF) 来简化API开发：

后端（Django + MySQL） #

1. 先配置MySQL作为Django的数据库（在settings.py里设置DATABASES），创建对应的模型：

# models.py
from django.db import models

class UserProfile(models.Model):
    name = models.CharField(max_length=100)
    email = models.EmailField(unique=True)
    # 按需添加其他字段

2. 编写DRF序列化器和视图，处理数据的读写逻辑：

# serializers.py
from rest_framework import serializers
from .models import UserProfile

class UserProfileSerializer(serializers.ModelSerializer):
    class Meta:
        model = UserProfile
        fields = '__all__'

# views.py
from rest_framework import viewsets
from .models import UserProfile
from .serializers import UserProfileSerializer

class UserProfileViewSet(viewsets.ModelViewSet):
    queryset = UserProfile.objects.all()
    serializer_class = UserProfileSerializer

3. 配置URL路由，将视图集映射到API端点：

# urls.py
from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import UserProfileViewSet

router = DefaultRouter()
router.register(r'profiles', UserProfileViewSet)

urlpatterns = [
    path('api/', include(router.urls)),
]

前端（Angular-formly） #

1. 提交表单数据到Django API：

// component.ts
import { HttpClient } from '@angular/common/http';
import { FormlyFormOptions, FormlyFieldConfig } from '@ngx-formly/core';

export class ProfileComponent {
  model: any = {};
  options: FormlyFormOptions = {};
  fields: FormlyFieldConfig[] = [
    {
      key: 'name',
      type: 'input',
      templateOptions: { label: '姓名', required: true },
    },
    {
      key: 'email',
      type: 'input',
      templateOptions: { label: '邮箱', type: 'email', required: true },
    },
  ];

  constructor(private http: HttpClient) {}

  onSubmit() {
    this.http.post('/api/profiles/', this.model).subscribe(
      (response) => console.log('数据保存成功:', response),
      (error) => console.error('提交失败:', error)
    );
  }
}

2. 从Django拉取数据填充表单：

ngOnInit() {
  // 示例：获取ID为1的用户数据
  this.http.get('/api/profiles/1/').subscribe((data) => {
    this.model = data;
  });
}

2. 在Django代码中访问指定的rate值 #

这取决于rate的存储位置，分几种常见场景处理：

场景1：rate是数据库模型字段的值 #

如果rate是你模型中定义的字段，直接查询实例后访问即可：

from .models import YourModel

# 获取指定实例的rate值
target_instance = YourModel.objects.get(id=1)
print(target_instance.rate)  # 直接访问字段属性

场景2：rate是前端传递的请求参数 #

如果rate是前端通过GET/POST请求传过来的参数：

# 在视图函数中获取
def your_view(request):
    # GET请求参数（URL中?rate=xxx）
    rate = request.GET.get('rate')
    # 转成数字类型（如果需要）
    rate_float = float(rate) if rate else 0.0

    # POST请求参数（表单提交）
    rate_post = request.POST.get('rate')

场景3：rate是全局配置项 #

如果在settings.py中定义了全局rate配置：

# settings.py
RATE = 0.08

在代码中导入并访问：

from django.conf import settings

def calculate_fee(amount):
    return amount * settings.RATE

3. 使用Angular-formly创建文件上传按钮 #

Angular-formly没有默认的文件上传字段，需要自定义字段类型，步骤如下：

1. 定义自定义文件上传组件 #

// file-upload.type.ts
import { Component } from '@angular/core';
import { FieldType, FieldTypeConfig } from '@ngx-formly/core';

@Component({
  selector: 'formly-field-file-upload',
  template: `
    <input
      type="file"
      [formControl]="formControl"
      [formlyAttributes]="field"
      (change)="onFileSelect($event)"
    />
  `,
})
export class FileUploadTypeComponent extends FieldType<FieldTypeConfig> {
  onFileSelect(event: Event) {
    const file = (event.target as HTMLInputElement).files?.[0];
    if (file) {
      this.formControl.setValue(file);
    }
  }
}

2. 在模块中注册自定义字段类型 #

// app.module.ts
import { NgModule } from '@angular/core';
import { FormlyModule } from '@ngx-formly/core';
import { FileUploadTypeComponent } from './file-upload.type';

@NgModule({
  imports: [
    FormlyModule.forRoot({
      types: [
        { name: 'file', component: FileUploadTypeComponent },
      ],
    }),
  ],
})
export class AppModule {}

3. 在表单中使用文件上传字段 #

// component.ts
fields: FormlyFieldConfig[] = [
  {
    key: 'avatar',
    type: 'file',
    templateOptions: { label: '上传头像', required: true },
  },
];

onSubmit() {
  // 用FormData封装文件数据（必须用multipart/form-data格式）
  const formData = new FormData();
  formData.append('avatar', this.model.avatar);
  // 同时添加其他表单字段
  formData.append('name', this.model.name);

  this.http.post('/api/upload/', formData, {
    headers: { 'Content-Type': 'multipart/form-data' },
  }).subscribe(response => {
    console.log('文件上传成功:', response);
  });
}

后端Django处理文件上传 #

在模型中定义FileField，并配置DRF视图支持文件解析：

# models.py
class UserProfile(models.Model):
    avatar = models.FileField(upload_to='avatars/')

# views.py
from rest_framework import viewsets
from rest_framework.parsers import MultiPartParser, FormParser
from .models import UserProfile
from .serializers import UserProfileSerializer

class UserProfileViewSet(viewsets.ModelViewSet):
    queryset = UserProfile.objects.all()
    serializer_class = UserProfileSerializer
    # 启用文件解析器
    parser_classes = (MultiPartParser, FormParser)

内容的提问来源于stack exchange，提问作者J. Doe