typescript Angular Object Binding

我对angular没有太多的经验，但在我的工作中有一个任务需要处理。基本上，我有一个表单，用户可以在其中插入值，这些值直接进入后端进行处理。在表单上，我们提交了一个PolicyDocument，它具有以下参数：

import {ContactFrequency} from './ContactFrequency';

export class PolicyDocument {
    id: number;
    name: string;
    description: string;
    file: string;
    validFrom: string;
    country: string;
    majorVersion: number;
    minorVersion: number;
    status: string;// TODO dmann make enum or string set
    primaryText: string;
    secondaryText: string;
    textBlocks: TextBlock[];
    contactFrequency?: ContactFrequency;

    constructor() {
    }
}

ContactFrequency是这样的：

export class ContactFrequency{
    id:number;
    contactFrequency: number;

    constructor() {
    }
}

我们所取的值的形式是：

<label for="inputContactFrequency" class="col-1 col-form-label">Contact Frequency (Days)</label>
            <div class="col-2 pr-0">
                <input type="number" class="form-control" id="inputContactFrequency" placeholder="(Optional)"
                       [ngModel]="detail?.contactFrequency?.contactFrequency"
                       name="contactFrequency.contactFrequency" [disabled]="fieldsDisabled()" min="0"/>
            </div>

抱歉，命名约定很乱。我的问题是;每当我插入一个值时，进入后端的有效负载如下所示。

contactFrequency: 180

如果我不插入一个值，它是：

contactFrequency:{
   contactFrequency: null
}

当我没有插入值时，有效负载是可以的，它像我期望的那样工作，但是每当我插入一个值时，它不会作为一个对象。有没有一种快速/简单的方法来修改它，因为将对象传递给后端？
当表单填写并提交时，第一个handleCreate方法被激活：

handleCreate(policyDocument: PolicyDocument) {
        this.userFeedbackService.clearAllUserFeedback();
        if (this.validatePolicyDocumentDate(policyDocument)) {
            this.policyDocumentService.create(policyDocument).subscribe(
                (response) => {
                    console.log('handleCreate returned ', response);
                    this.router.navigate(['/policies'])
                        .then(() => this.userFeedbackService.clearAndAddSuccess('Policy created successfully'));
                },
                () => {
                    this.removeDefaultValidityInDays();
                    window.scrollTo({top: 0, behavior: 'smooth'});
                });
        } else {
            window.scrollTo({top: 0, behavior: 'smooth'});
        }
    }

然后，它将进入服务：

create(policyDocument: PolicyDocument): Observable<PolicyDocument> {
        console.log("Policy Document for frequency rule: " + policyDocument);
        console.log("Contact Frequency for frequency rule: " + policyDocument.contactFrequency?.contactFrequency);
        return this.http
            .put(POLICY_DOCUMENTS_API, policyDocument)
            .map(data => {
                this.userFeedbackService.clearAndAddSuccess('Policy document has been created successfully');
                return <PolicyDocument>data;
            })
            .catch((err) => {
                this.userFeedbackService.addError('Failed creating policyDocument');
                throw new Error(err.toString());
            });
    }

正如我所看到的，下一个请求在为null时是可以的，因为这个属性是由ContactFrequency模型输入的：

contactFrequency:{
   contactFrequency: null
}

...所以，当你输入一些东西时，输入响应为number attribute。没问题！，这里的问题是你需要在http请求执行之前捕获请求，在那一刻你需要创建对象为contactFrequency：
愿您享受这样的服务：

save(data: YourModel): Observable<YourModel> {

    return this.http.post(url, data).pipe(
      catchError((err) => {
        ... code
      })
    );
  }

你需要在你的控制器中调用serivce.save(data)，这里你需要像这样构建对象：

const obj: PolicyDocument = {
    bla: 'bla',
    ble: 'ble',
    contactFrequency: {
        id: 'xyz',
        contactFrequency: 180
    }
    
}

值为180，然后构建对象，然后调用service.save(data)
我的建议是使用reactive forms，因为你可以订阅输入并构建contactFrequency模型的值
在我看来，template forms必须被弃用。

typescript Angular Object Binding

1条答案

相关问题

热门标签

最新问答