在使用 Angular 6 实现 Stripe 时，我收到 ERROR 错误：mat-form-field 必须包含 MatFormFieldControl

Question

要在我的 Angular 6 材质项目中实现 Stripe，我得到 mat-form-field 必须包含 MatFormFieldControl。

为了集成，我使用 ngx-stripe。

下面是我的代码：

ts 文件：

import { StripeService, Element as StripeElement, ElementsOptions } from "ngx-stripe";

constructor(private stripeService: StripeService) {
   }

elements: Element;
card: StripeElement;

this.stripeService.elements(this.elementsOptions)
    .subscribe(elements => {
      this.card = elements.create('cardNumber', {
        placeholder: '',
        style: {
          base: {
            iconColor: '#666EE8',
            color: '#31325F',
            lineHeight: '40px',
            fontWeight: 300,
            fontSize: '18px',
            '::placeholder': {
              color: '#CFD7E0'
            },
          }
        }
      })
      this.card.mount('#card-element')

      let cvc = elements.create('cardCvc', {
        placeholder: '',
        style: {
          base: {
            iconColor: '#666EE8',
            color: '#31325F',
            lineHeight: '40px',
            fontWeight: 300,
            fontSize: '18px',
            '::placeholder': {
              color: '#CFD7E0'
            },
          }
        }
      })
      cvc.mount('#card-cvc');

      let exp = elements.create('cardExpiry', {
        placeholder:'',
        style: {
          base: {
            iconColor: '#666EE8',
            color: '#31325F',
            lineHeight: '40px',
            fontWeight: 300,
            fontSize: '18px',
            '::placeholder': {
              color: '#CFD7E0'
            }
          }
        }
      })
      exp.mount('#card-exp');
    });

onSubmit() {
    const name = 'Joe'
    this.stripeService
      .createToken(this.card, { name } )
      .subscribe(obj => {
        if (obj) {
          console.log("Token is --> ", obj.token.id);

        } else {
          // Error creating the token
          console.log("Error comes ");
        }
      });
  }

html 文件：

<form (ngSubmit)="onSubmit()" class="example-form" *ngIf="name==='credit'">
    <div mat-dialog-content>
         <div class="row">
             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                  <div class="card-style-number">
                      <mat-form-field class="example-full-width" >
                            <span id="card-element" matInput></span>
                      </mat-form-field>
                   </div>
              </div>
         </div>
         <div class="row">    
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
           <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 card-style">
               <mat-form-field class="example-half-width" >
                    <span id="card-cvc" matInput></span>
               </mat-form-field>
           </div>
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 card-style">
             <mat-form-field class="example-half-width" >
                 <span id="card-exp" matInput></span>
             </mat-form-field>
          </div>
       </div>
      </div>
   </div>
        <div mat-dialog-actions *ngIf="name==='credit'">
            <div class="row">
               <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                   <div class="Rectangle-3">
                      <button cdkFocusInitial class="checkout" type="submit">CHECKOUT</button>
                   </div>
               </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin:10px 0px 10px 0px">
                 <div class="Within-tap-checkout">
                     <span>Within tap checkout it means you agree with <span style="color:#76a6ef">Terms & Conditions</span> </span>
                 </div>
              </div>
           </div>
        </div>
     </form>

由于 Stripe 元素本身生成输入元素，我无法在任何地方添加 MatInput。我该如何解决这个问题？

Answer 1

Stripe 元素将其自己的表单作为 Iframe 插入。出于安全原因，您无法控制它。您无法将 Stripe Elements 表单控件设为 Material Input 控件，只能使用 css 使其看起来相似。

用普通块替换

<span id="card-element" matInput></span>

，例如

<div id="card-element></div>

.

它不会是一个材料输入表格，但至少它会起作用。

Answer 2

所以我在这里回答我自己的问题，以便有人可以获得帮助。将 input 标签放在 span 标签内，并将 matInput 与 input 元素放在一起。

这是我的代码：

<form (ngSubmit)="onSubmit()" class="example-form">
   <div mat-dialog-content>
       <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
              <mat-form-field class="example-full-width" >
                  <span id="card-element">
                       <input matInput=number placeholder="Card number" />
                   </span>
               </mat-form-field>
           </div>
       </div>
    <div class="row">    
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
             <div class="example-form">
                  <mat-form-field class="example-half-width" >
                      <span id="card-exp">
                           <input matInput placeholder="Expiration date">
                      </span>
                  </mat-form-field>
                   <mat-form-field class="example-half-width" >
                       <span id="card-cvc">
                            <input matInput=number placeholder="CVV" />
                       </span>
                     </mat-form-field>                            
                 </div>
            </div>
        </div>
    </div>

      <div mat-dialog-content>
           <div class="row Rectangle-4-Copy">
               <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                  <div class="Rectangle-3">
                     <button cdkFocusInitial class="checkout" type="submit">CHECKOUT</button>
                  </div>
              </div>
              <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin:10px 0px 10px 0px">
                  <div class="Within-tap-checkout">
                      <span>Within tap checkout it means you agree with <span style="color:#76a6ef">Terms & Conditions</span> </span>
                  </div>
               </div>
            </div>
         </div>
      </form>