在使用角度 6 实现条纹时，我收到错误错误:mat-form-field 必须包含一个 MatFormFieldCont

Question

为了在我的 angular 6 材质项目中实现条纹，我得到的 mat-form-field 必须包含一个 MatFormFieldControl。

对于集成，我使用的是ngx条纹。

下面是我的代码：

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>

由于条纹元素自己生成输入元素，因此我无法在任何地方添加 MatInput。请帮助我..

Answer 1

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

用普通块替换<span id="card-element" matInput></span>，例如

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

它不会是材料输入形式，但至少它会起作用。

Answer 2

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

这是我的代码：

<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>