While implementing Stripe with Angular 6 I am getting ERROR Error: mat-form-field must contain a MatFormFieldControl

Question

To implement Stripe in my Angular 6 material project, I am getting mat-form-field must contain a MatFormFieldControl.

For integration I am using ngx-stripe.

Below is my code:

ts file:

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

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

As Stripe elements generate input elements themselves I am not able to add MatInput anywhere. How can I resolve this?

Answer 1

So here I am answering my own question so that someone can get help. By putting input tag inside the span tag and put matInput with input element.

Here is my code:

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